locked
Template databinding, results undefined , WinJS RRS feed

  • Question



  • I am binding a template. Before I bind, I checked the data is fine with console.log();. All the data in the output shows as 'undefined' and gives NO error.

    JS:

    var Reply = WinJS.Binding.define({
      contents: "",
      fromTBuser_username: "",
      timestamp: ""
    });
    var templateElement = document.getElementById("replytemplate");
      var templateLocation = document.getElementById("article_replies");
      for (var i = 0; i < items[0].data.replies.length; i++) {
        templateElement.winControl.render(
          new Reply({
            contents: items[0].data.replies[i].contents,
            fromTBuser_username:items[0].data.replies[i].fromTBuser_username,
            timestamp:items[0].data.replies[i].timestamp
          }//CHECKED DATA WITH CONSOLE.LOG
        )).done(function (result) {
          templateLocation.appendChild(result);
        });
      }

    html:
    <!-- REPLY TEMPLATE -->
    <div id="replytemplate" class="replytemplate" data-win-control="WinJS.Binding.Template">
      <div class="Reply">
        <h3 data-win-bind="textContent: contents"></h3>
        <h3 data-win-bind="textContent: fromTBuser_username"></h3>
        <div data-win-bind="textContent: timestamp"></div>
      </div>
    </div>
    <!-- TARGET LOCATION -->
    <div id="article_replies">
    logs:

    console.log(items); //returns [object Object] console.log(items.data); //returns undefined console.log(items[0].data); //returns [object Object] //only [0] has replies at the moment. console.log(items[0].data.replies[i]); //returns [object Object] x4 //Which contains 4 replies ,which is right. console.log(items[0].data.replies[i].contents); //returns the right information, 'test1', 'test2' ,'test3' ,'test4'

    console.log(result.innerHTML);
    //after appedChild(result);
    //returns  <div class="Reply">
    //             <h3 data-win-bind="textContent: contents">test reply4</h3>
    //             <h3 data-win-bind="innerHTML: fromTBuser_username">USER</h3>
    //             <div data-win-bind="textContent: timestamp">2012-11-24 17:08:20</div>
    //         </div>

    Thanks for any advice! 

    • Edited by wtsang02 Sunday, November 25, 2012 7:18 AM
    Sunday, November 25, 2012 6:00 AM

Answers

  • I Using the code at www.willietsang.com/temp/, the problem occurred in my environment. And I found which statement caused this problem. At line 170 in /pages/split/split.js:

    binding.processAll(details, items[0].data);

    If you move this line before for-loop, you should not see "undefined" in output. (I don't know whether this is the best solution or not.) Example:

    binding.processAll(details, items[0].data);
    for (var i = 0; i < items[0].data.replies.length; i++) {
        console.log(items[0].data.replies[i].contents);
        templateElement.winControl.render(
            new Reply({
                contents: items[0].data.replies[i].contents,
                fromTBuser_username: items[0].data.replies[i].fromTBuser_username,
                timestamp: items[0].data.replies[i].timestamp
            }//CHECKED DATA WITH CONSOLE.LOG
            )).done(function (result) {
                console.log(result.tagName);
    
                templateLocation.innerHTML += result.innerHTML;
                console.log(result.innerHTML);
            });
    }



    • Marked as answer by wtsang02 Sunday, November 25, 2012 7:20 PM
    • Edited by NOBUOKA Yu Monday, November 26, 2012 4:06 AM wrong english
    Sunday, November 25, 2012 6:55 PM

All replies

  • > All the data in the output shows as 'undefined' and gives NO error.

    Which output do you refer to? The following output seems to be correct (There is no "undefined"). What is expected result?

    console.log(result.innerHTML); //after appedChild(result); //returns <div class="Reply"> // <h3 data-win-bind="textContent: contents">test reply4</h3> // <h3 data-win-bind="innerHTML: fromTBuser_username">USER</h3> // <div data-win-bind="textContent: timestamp">2012-11-24 17:08:20</div> // </div>

    By the way, the console.dir method is more convenient than the console.log method in case you want to check properties of an object.

    Sunday, November 25, 2012 10:05 AM
  • Thanks for the reply, the actual output is like this : https://dl.dropbox.com/u/66988308/Capture.PNG   <--(can't insert image because account isn't vertfied.)
    Sunday, November 25, 2012 4:26 PM
  • Thanks for uploading a screen shot of result.

    Hmm..., I ran your code also, but the result did not include "undefined".  I want to know how you set the value of the variable items.  When I run your code, the variable items was set as below:

    var items = [
        {
            data: {
                replies: [
                    {
                        contents: "ok",
                        fromTBuser_username: "username",
                        timestamp: "2012-10-10 10:10:10"
                    }
                ]
            }
        }
    ];
    var Reply = WinJS.Binding.define({
        contents: "",
        fromTBuser_username: "",
        timestamp: ""
    });
    var templateElement = document.getElementById("replytemplate");
    var templateLocation = document.getElementById("article_replies");
    for (var i = 0; i < items[0].data.replies.length; i++) {
        templateElement.winControl.render(
          new Reply({
              contents: items[0].data.replies[i].contents,
              fromTBuser_username: items[0].data.replies[i].fromTBuser_username,
              timestamp: items[0].data.replies[i].timestamp
          }//CHECKED DATA WITH CONSOLE.LOG
        )).done(function (result) {
            templateLocation.appendChild(result);
        });
    }

    • Edited by NOBUOKA Yu Sunday, November 25, 2012 5:31 PM miss html
    Sunday, November 25, 2012 5:30 PM
  • www.willietsang.com/temp/

    This is based off of the split template but getting json for web. getJSONData.js line 62 , is where it binds.

    split.js line 154 is where the code is. Thanks alot for helping.

    I have added static data in

     new Reply({ 
    contents:"asdf",
    fromTBuser_username:"asafsd",
    timestamp:"Qqq"
               }
    I am still getting undefined in output , and right results in console.log();


    • Edited by wtsang02 Sunday, November 25, 2012 6:12 PM
    Sunday, November 25, 2012 6:03 PM
  • I Using the code at www.willietsang.com/temp/, the problem occurred in my environment. And I found which statement caused this problem. At line 170 in /pages/split/split.js:

    binding.processAll(details, items[0].data);

    If you move this line before for-loop, you should not see "undefined" in output. (I don't know whether this is the best solution or not.) Example:

    binding.processAll(details, items[0].data);
    for (var i = 0; i < items[0].data.replies.length; i++) {
        console.log(items[0].data.replies[i].contents);
        templateElement.winControl.render(
            new Reply({
                contents: items[0].data.replies[i].contents,
                fromTBuser_username: items[0].data.replies[i].fromTBuser_username,
                timestamp: items[0].data.replies[i].timestamp
            }//CHECKED DATA WITH CONSOLE.LOG
            )).done(function (result) {
                console.log(result.tagName);
    
                templateLocation.innerHTML += result.innerHTML;
                console.log(result.innerHTML);
            });
    }



    • Marked as answer by wtsang02 Sunday, November 25, 2012 7:20 PM
    • Edited by NOBUOKA Yu Monday, November 26, 2012 4:06 AM wrong english
    Sunday, November 25, 2012 6:55 PM
  • Thanks a lot. I should proccess it before appending elements. Sorry for not stateing that line in the question, I didn't realize that would be a problem. Thanks again for your time.
    Sunday, November 25, 2012 7:21 PM
  • You're welcome! It was good to solve the problem.

    Regards

    Monday, November 26, 2012 4:06 AM