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

Question

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.

Also please note I omitted other options from the ListView instantiation example above as I presume them to be irrelevant to the question, but I am using layout of ListLayout, selectionMode of none, and a static itemDataSource. — GotDibbs
– GotDibbs, Commented Mar 7, 2015 at 2:55
I'm curious, what selector are you using to reference the template? Typically one uses either an id or a class on the template <div> and references that with the selector. — Kraig Brockschmidt - MSFT
– Kraig Brockschmidt - MSFT, Commented Mar 9, 2015 at 16:03
@KraigBrockschmidt-MSFT I was using a class name at the time. I know I was able to retrieve the element fine, as I was able to validate the winControl property on the retrieved element. — GotDibbs
– GotDibbs, Commented Mar 9, 2015 at 19:18

GotDibbs · Accepted Answer · 2015-03-07 02:53:20Z

3

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);
        });
    }
});

answered Mar 7, 2015 at 2:53

GotDibbs

3,1571 gold badge25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rigdern · Accepted Answer · 2015-03-30 06:01:43Z

0

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.

answered Mar 30, 2015 at 6:01

rigdern

1135 bronze badges

1 Comment

GotDibbs Over a year ago

Apologies for the delayed reply, but this did not work for me either. The solution I posted is still the only thing that works for me.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related