Search code examples
javascriptkendo-uikendo-template

populate Listview with array of strings


I have created a jsbin at http://jsbin.com/ifimadOw/11/edit to illustrate.

I have this listview object:

<ul id="marketplace-categories-listview" data-bind="source: results"></ul>

And I have this dataset:

dsCats = new kendo.data.DataSource({
    transport: {
        read: {
            url: myUrl,
            data: {
                key: myKey
            }
        }
    }
});

$("#marketplace-categories-listview").kendoMobileListView({
    dataSource: dsCats,
    template: $("#marketplace-product-template").text()
});

The data returned from the API looks something like this:

{"count": 3, "results": ["Acupuncture Therapy","Automobiles","Lawn Care"]}

And here is my template:

<script type="text/x-kendo-tmpl" id="marketplace-categories-template">
    <li data-bind="text: this"></li>
</script>

Because my data doesn't have named elements, I can't use something like "#:category#" in the template. I have also tried data-bind (as above), but so far nothing works. Surely there is a way to do this.


Solution

  • Simply use data (which is the name of the context variable passed to the template function) in your template:

      $("#category-listview").kendoMobileListView({
        dataSource: dsCats,
        template: "#= data #"
      });
    

    (updated JSBin)