anywhichway/tlx

Sporadically error "Cannot read property 'template' of undefined"

Closed this issue · 3 comments

pwFoo commented

Hi @anywhichway,
I buit a simple test page filled by rest api calls and JS using tlx.js (I like your small library...) and "simpleFetch":https://github.com/BolajiAyodeji/simple-fetch-library (request.js file) as fetch wrapper.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <script type="text/javascript" src="js/request.js"></script>
    <script type="text/javascript" src="js/tlx.min.js"></script>
  </head>
  <body id="body">
    <div id="page">
        <h1 t-content="${page.title}"></h1>
        <div>${page.content}</div>
    </div>
    
    <table id="foreach" t-foreach="${page.loop1}">
        <tr>
            <td>${value.id}</td>
            <td>${value.name}</td>
        </tr>
    </table>

    <script type="text/javascript">
        const http = new simpleFetch;
        const url = 'https://api.it-dengler.de';    
        const page = tlx.reactor({
            loop1: [
                {id: 1, name: 'User1'},
                {id: 2, name: 'User2'},
                {id: 3, name: 'User3'},
            ],
            name: 'Placeholder', 
            content: "Placeholder",
        });
        tlx.view(document.getElementById("body"),{model:page});

        http.get(url + '/items/page1').then(function(res) {
            console.log(res);
            page.title = res.data.title;
            page.content = res.data.content;
        });

        http.get(url + '/items/test').then(function(res) {
            console.log(res);
            page.loop1.push({id: 4, name: 'Test123'});
        });

    </script>
  </body>
</html>

page.title and page.content filled by a fetch request and for t-foreach loop1 part I "fake" and added row.

Looks good so far. Also works with navigate between test pages in browser web developer console by:

http.get("https://api.it-dengler.de/items/page2").then(function(res) {page.title = res.data.title;page.content = res.data.content;})

http.get("https://api.it-dengler.de/items/page1").then(function(res) {page.title = res.data.title;page.content = res.data.content;})

Or add a row to foreach / table:

page.loop1.push({id: 4, name: 'Test123'});

But... If I press F5 some times I get a sporadically error from tlx.js:

Uncaught (in promise) TypeError: Cannot read property 'template' of undefined
    at t-content (tlx.min.js:1)
    at tlx.min.js:1
    at Array.forEach (<anonymous>)
    at r (tlx.min.js:1)
    at tlx.min.js:1
    at Array.forEach (<anonymous>)
    at r (tlx.min.js:1)
    at tlx.min.js:1
    at Array.forEach (<anonymous>)
    at r (tlx.min.js:1)
  | t-content | @ | tlx.min.js:1
-- | -- | -- | --
  | (anonymous) | @ | tlx.min.js:1
  | r | @ | tlx.min.js:1
  | (anonymous) | @ | tlx.min.js:1
  | r | @ | tlx.min.js:1
  | (anonymous) | @ | tlx.min.js:1
  | r | @ | tlx.min.js:1
  | O | @ | tlx.min.js:1
  | (anonymous) | @ | tlx.min.js:1
  | (anonymous) | @ | tlx.min.js:1
  | set | @ | tlx.min.js:1
  | (anonymous) | @ | (index):45
  | Promise.then (async) |   |  
  | (anonymous) | @ | (index):43

You can test with Chrome + web developer tools. Look at the console and press F5 to refresh until error ocours.
https://html.it-dengler.de/

Any idea way? Maybe because of two HTTP GET requests and replace page content from tlx.reactor()? Is it because of the tlx.js internal data change / replace?

pwFoo commented

Maybe I need to change the way I structured page data... At the moment I tried to use ONE model and bind to id=body, but I'm not sure if I should use more than one model with multiple tlx.view() calls...

pwFoo commented

Demo isn't available anymore, but looks like a bug of tlx.js?

anywhichway commented