kendo-uitemplate-enginekendo-mvvm

Kendo mvvm template with source without a parent element


I'm trying to bind an array inside a list, but the list needs to have a static element before the array's values.

The fiddle shows the result I'd want, except it currently nests the li item.

HTML:

<ul id="root">
    <li>blop</li>
    <li data-template="list-template" data-bind="source: products">
    </li>
    <script id="list-template" type="text/x-kendo-template">
        <li data-bind="text: name"></li>
    </script>
</ul>

JavaScript:

var vm = kendo.observable({
    products: [
        { id: 1, name: "foo" },
        { id: 2, name: "bar" }
    ]
});

kendo.bind($("#root"), vm);

http://jsfiddle.net/zpqo80pw/

With KnockoutJS, there was the comment syntax that could be used:

<!-- ko: foreach: products -->
<!-- /ko -->

Is there something similar in Kendo UI?


Solution

  • I think you should be able to achieve this by extending kendo binding. I put up a small example at jsfiddle see if it match your requirement.

    kendo.data.binders.staticValue = kendo.data.Binder.extend({
            refresh: function () {
                    debugger;
                    var that = this;
                    var value = that.bindings["staticValue"].get();
                    $(that.element).text(value + $(that.element).text());
                }
            });