kendo-ui - Kendo mvvm 模板，源代码没有父元素

Question

我正在尝试在列表中绑定一个数组，但该列表需要在数组值之前有一个静态元素。

小提琴显示了我想要的结果，除了它当前嵌套了该li项目。

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/

使用 KnockoutJS，可以使用注释语法：

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

Kendo UI中是否有类似的东西？

Answer 1

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

Answer 2

这是我知道的一个老问题，但是如果这个人想严格执行 mvvm，他们所需要的只是调用相同的 data-bind 和 data-template 并将其放在容器元素上，例如

<ul data-template="template-id" data-bind="source: items"></ul>

并在模板上简单地改变

<script id="list-template" type="text/x-kendo-template">
    <li data-bind="text: name"></li>
</script>

至

<script id="list-template" type="text/x-kendo-template">
    <li>#: staticValue # :: #: name #</li>
</script>

模型中传递给模板的任何内容都将可用，甚至可以在模板中混合使用 data-* 注入 #: # 语法