javascript - 从 Kendo 上的 ListView 项模板访问模型数据

Question

我需要从 ListView 项目的模板中访问模型字段。基本上我需要用 viewModel 中的“valueToAccess”替换名字。有人可以在这里帮助我。

<div id="app"></div>

<script type="text/x-kendo-template" id="item-template">
    <a href="/#= name #/#= name #">#= name #</a>
</script>

<script type="text/x-kendo-template" id="view-template">
    <div data-role="listview"
         data-bind="source: items"
         data-template="item-template">
    </div>
</script>

<script>

    var viewModel = {
        items: new kendo.data.DataSource({
            data: [{ name: "item1" }, { name: "item2" }]
        }),

        valueToAccess: "index",

        remove: function(e){
            this.items.remove(e.data);
        }
    };

    viewModel.items = new kendo.data.DataSource({
        data: [{ name: "item1" }, { name: "item2" }]
    });

    var view = new kendo.View('view-template', { model: viewModel });

    view.render("#app");

</script>

<div id="app"></div>

Answer 1

您可以使用依赖属性来实现。

<script type="text/x-kendo-template" id="item-template">
    <a data-bind="attr: { href: href}, text: name"></a>
</script>

<script>
var viewModel = {
    items: new kendo.data.DataSource({
        data: [{ name: "item1" }, { name: "item2" }]
    }),

    valueToAccess: "index",
    href: function(item) {
      return this.get("valueToAccess") + "/" + item.name;
    },

    remove: function(e){
        this.items.remove(e.data);
    }
};
</script>

这是一个现场演示:http://jsbin.com/naxiy/1/edit