CODEWITHSUNDEEP
javascriptwindows-8windows-8.1winjs
GotDibbs
GotDibbs

Reputation: 3167

Error when instantiating WinJS.UI.ListView with template from code

In the process of creating a custom WinJS control which contains a WinJS.UI.ListView, I was attempting to allow a user to pass a selector for the template.

However, no matter if I have the template "pre-created" in the HTML page like you would expect:

<div data-win-control="WinJS.Binding.Template"> <!-- ... --> </div>

Nor if I query for the element and create the template from code like:

var template = new WinJS.Binding.Template(document.querySelector(selector));

When I get to instantiating the ListView and pass in the template element itself (or its winControl property) to the ListView's itemTemplate option, as such:

new WinJS.UI.ListView(elem,  { itemTemplate: template.winControl });

I receive the following error:

Exception is about to be caught by JavaScript library code at line 11562, column 21 in ms-appx://microsoft.winjs.2.0/js/base.js

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method '_renderItemImpl'

I attempted to trace it back a bit but am getting lost in base.js. Hoping someone else has run into this.

Note: I've included my workaround as an answer.

Upvotes: 2

Views: 169

Answers (2)

rigdern
rigdern

Reputation: 113

Make sure the declarative markup for the Binding.Template has been processed before you try to use it. You can process declarative markup with WinJS.UI.processAll().

If you are creating both the ListView and Binding.Template declaratively, make sure the Binding.Template appears first in your markup so that it is done being processed by the time the ListView tries to consume it.

Check out this sample which creates a ListView and template with declarative markup.

Upvotes: 0

GotDibbs
GotDibbs

Reputation: 3167

The only workaround I've been able to get to work is to instantiate the template in code, then pass a function to the itemTemplate option when instantiating the ListView. The documentation on what is expected here is sparse, but all of the demos where the ListView is instantiated via code use a templating function so I presume this is the only way to achieve this sadly.

new WinJS.UI.ListView(elem,  {
    itemTemplate: function (promise) {
        return promise.then(function (item) {
            return resultsTemplate.render(item.data);
        });
    }
});

Upvotes: 3

Related Questions