locked
Loading itemTemplate for WinJS.UI.ListView from external source

    Question

  • I am wondering if someone can shed some light on why this does not work.

    I can successfully dynamically template each WinJS.UI.ListView item if I define the templates in my html view (First Scenario). However if I load the template from a seperate html file using a $.get statement it does not work (Second Scenario).

    self.selectTemplate = function (itemPromise) {

         return itemPromise.then(function (item) {

    First Scenario: (var itemTemplate = document.getElementById(item.data.controlType + "ItemTemplate");

    var container = document.createElement("div");

    itemTemplate.winControl.render(item.data, container);

    return container;)

    Second Scenario: (var itemTemplatePromise = ko.bindingHandlers.searchPropertyBuilder.loadTemplate(item.data.controlType);

    itemTemplatePromise.done(function (itemTemplateLoaded) {

    var templateContainer = document.createElement("div");

    templateContainer.innerHTML = itemTemplateLoaded;
    templateElement = templateContainer.firstChild;

    WinJS.UI.process(templateElement);

    var container = document.createElement("div");
    templateElement.winControl.render(item.data, container);
    return container;
    });)
    }

    WinJS.Utilities.markSupportedForProcessing(self.selectTemplate);

    WinJS.Namespace.define("TemplateSelector", {

    template: self.selectTemplate

    });

    Thursday, November 7, 2013 2:01 PM

All replies

  • Where is it failing? Are you able to hit breakpoints inside the .done completion handler? If not, check whether the promise is returning in an error state (adding an error completion handler). If you are getting the correct template object back (itemTemplateLoaded), I'd check the DOM Explorer to see whether the container object is getting added to the DOM when it returns. I'm also a little unclear what you are doing with the returned "container" object. Are you trying to set the template before the container object returns?

    And if self.selectTemplate is setting the template, should it be calling itemPromise (as in the code above), or itemTemplatePromise, which is the actual name of the promise in this code.

    Thursday, November 7, 2013 4:45 PM
  • It is not failing. The code executes flawlessly. The end result though is that for first scenario the content of the template is displayed and for the second scenario no content is displayed. the self.selectTemplate function is being used to select the template for the individual listview item.

    <div id="customListView" data-win-control="WinJS.UI.ListView"
            data-win-options="{ itemTemplate: TemplateSelector.template, layout : {type: WinJS.UI.CellSpanningLayout}, selectionMode: 'none' }">
        </div>

    I am asking this question for someone with a deep understanding of WinJS because I do not see any inherent differences between the two code paths. The end result should be the same and it is not.

    Thursday, November 7, 2013 6:42 PM