Is it possible to bind a ListView to an ObservableArray of <li> elements?

[Calvin]

Hi,

Is it possible to bind a ListView to a collection of HTML elements?

If items is an ObservableArray of <li> elements, what goes into the template?  Or is a template necessary?

<script id="li-template" type="text/x-kendo-template">

    ???? WHAT GOES HERE if items is a collection of <li> elements

</script>

<ul id="documentsList" data-role="listview" data-bind="source: items" data-template="li-template"></ul>

Incidentally, the reason the items collection contains HTML elements (<li>) rather than data objects is because the list-items wrap Seadragon.Viewer objects.  The constructor for a Seadragon.Viewer object takes a container HTML element as its parameter.  At this point, I’m merely exploring ways to convert this section of code to an MVVM approach using declarative bindings.  Toward that end, binding to the ObservableArray of <li> elements would be a first step.  But if there is a better approach – I suspect there is – then I would certainly like to hear about it.

Thanks!

[Alexander Valchev]

Hi Calvin,

I am afraid that what you would like to achieve is not supported. The source binding works with DataSource or Observable array of objects. You cannot create Observable object from a <li> element, the source should contain data which will be used when the template (mark-up) is rendered. For more information please check this help topic.

Kind regards,
Alexander Valchev
the Telerik team