locked
Can a Template not be in the default.html?

    Question

  • My template works when it's in homepage.html, but I wanted to put it in a central place since other pages will be using it.

    I had this Template I was testing in my homepage.html:

        <div id="ItemBoxTemplate" data-win-control="WinJS.Binding.Template">
          <div class="item-box" style="position:absolute;top:111px;left:200px;display:block">
            <span>ITEM BOX TEMPLATE!!!</span>
          </div>
        </div>
    

    And in my homepage.js I have this:

          //  Example of adding a template.
          var template = WinJS.UI.getControl(document.getElementById("ItemBoxTemplate"));
    
          template.render().then(function (element) {
            var newApps = document.getElementById("NewAppsContainer");
    
            newApps.appendChild(element);
          })
    

    This works just fine, my template showed up on the page.

    But when I put the ItemBoxTemplate into the default.html the "var template" brought back nothing. Is there a different way to have the template be accessible "everywhere" than to put it on in the default.html? Which doesn't do what I expect.

    Cheers

    Friday, January 27, 2012 5:37 PM

Answers

All replies

  • Search is your friend:

    http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/e08f53e0-2856-49d1-a154-f05fc7993b7a

     

    Josh does a pretty good job here describing what he did.  In short, no it does not have to be in default.html

    -Jeff


    Jeff Sanders (MSFT)
    Friday, January 27, 2012 5:41 PM
    Moderator
  • Good stuff in there thanks.

    I just had to change this:
    var template = WinJS.UI.getControl(document.getElementById("ItemBoxTemplate"));

    ...to this:
    var template = new WinJS.Binding.Template(document.getElementById("ItemBoxTemplate"));

    ...then it found my Template in the default.html and it all works.

    Friday, January 27, 2012 6:03 PM
  • Beautiful!
    Jeff Sanders (MSFT)
    Friday, January 27, 2012 6:07 PM
    Moderator
  • Well it's in the output, but I guess I have it in the wrong place for it to be access via DOM in the JavaScript.

    My code for playing around:

     

      function fragmentLoad(elements, options) {
        WinJS.UI.processAll(elements).then(function () {
    
          //  Example of adding a template.
          var template = new WinJS.Binding.Template(document.getElementById("ItemBoxTemplate"));
    
          template.render({ title: "My Title From JavaScript", description: "Description from JavaScript...Booyah!!!", rate: 1 }).then(function (element) {
            var newApps = document.getElementById("NewAppsContainer");
    
            newApps.appendChild(element);
          });
    
          animateDivs();
        });
      }
    

    I have mine in the "processAll(elements)", the template gets rendered in the NewAppsContainer, but in my animateDivs, it doesn't seem to count the template I just appended.

     

    Example snippet:

      function animateDivs() {
        //  Loop through New App divs and give them animations
        var newAppsContainer = document.getElementById("NewAppsContainer");
        var newsDivs = newAppsContainer.children;
    

     

    newsDivs only has the 8 divs I have in there "hard coded", not the 9th I put in via the template and appending.


    • Edited by Harlequin Friday, January 27, 2012 6:29 PM
    Friday, January 27, 2012 6:28 PM
  • Figured Out
    Had to put the animateDivs() into the promise, then it worked.
    Snippet:
      function fragmentLoad(elements, options) {
        WinJS.UI.processAll(elements).then(function () {
    
          //  Example of adding a template.
          var template = new WinJS.Binding.Template(document.getElementById("ItemBoxTemplate"));
    
          template.render({ title: "My Title From JavaScript", description: "Description from JavaScript...Booyah!!!", rate: 1 }).then(function (element) {
            var newApps = document.getElementById("NewAppsContainer");
    
            newApps.appendChild(element);
    
            animateDivs();
          });
        });
      }
    

    • Edited by Harlequin Wednesday, February 08, 2012 10:06 PM Cleaned out some HTML in the code...
    Friday, January 27, 2012 6:42 PM