将视图模型绑定到列表视图

Posted 2023-05-07

【中文标题】将视图模型绑定到列表视图

【英文标题】：Binding a viewmodel to a listview

【发布时间】：2013-04-05 21:01:36

【问题描述】：

我正在测试 Kendo UI 的单页应用程序 (SPA) 和 MVVM 功能，但是在将 Viewmodel 绑定到作为页面内容的列表视图时遇到了一些问题...

到目前为止我所拥有的是：

<div id="app">
    <button data-bind="click: gotopage1">Page 1</button>
    <button data-bind="click: gotopage2">Page 2</button>
    <button data-bind="click: gotopage3">Page 3</button>
</div>

<script id="page1" type="text/x-kendo-template">
    <ul id="listView1" data-bind="source: photossource"></ul>
</script>

<script id="page2" type="text/x-kendo-template">
    //content of page 2
</script>

<script id="page3" type="text/x-kendo-template">
    //content of page 3
</script>

<script id="layout" type="text/x-kendo-template">
    <header></header><section id=content></section><footer></footer>
</script>

<script type="text/x-kendo-template" id="templatelistitem">
    <div class="item">
        <img data-bind="attr:  src: this " />
    </div>
</script>
<script>
    var set1 = new Array();
    var set2 = new Array();
    var set3 = new Array();

    //fill the arrays... they are just strings to put on the `src` attribute of the `img`

    var appViewModel = new kendo.observable(
        gotopage1: function () 
            router.navigate("/");
    ,
        gotopage2: function () 
            router.navigate("/page2");
    ,
        gotopage3: function () 
            router.navigate("/page3");
    
    );
    kendo.bind($("#app"), appViewModel);

    var pageViewModel = new kendo.observable(
        photossource: set1
    );

    var page1 = new kendo.View("#page1");
    var page2 = new kendo.View("#page2");
    var page3 = new kendo.View("#page3");

    var layout = new kendo.Layout("#layout");

    var router = new kendo.Router();

    router.route("/", function () 
        pageViewModel.photossource = set1;
        layout.showIn("#content", page1);
    );

    router.route("/page2", function () 
        pageViewModel.photossource = set2;
        layout.showIn("#content", page2);
    );

    router.route("/page3", function () 
        pageViewModel.photossource = set3;
        layout.showIn("#content", page3);
    );

    $(function () 
        router.start();
        layout.render($("#app"));
        layout.showIn("#content", page1);
    );

    $(document).ready(function () 
        $("#listView1").kendoListView(
            template: kendo.template($("#templatelistitem").html())
        );
        kendo.bind($("#listView1"), pageViewModel);
    );
</script>

我需要将pageViewModel绑定到page1的listview1。此pageViewModel 将共享 3 个页面。

这给了我以下错误：

未捕获的类型错误：无法读取未定义的属性“父级” kendo.web.min.js:12

我的主要问题是：

我应该如何？

需要设置listview的DataSource吗？

如何在列表项的模板中引用photossource？

【参考方案1】：

这里是JSFiddle 的解决方案，无一例外，我相信功能符合您的预期。

我改变的东西很少，我并不是说所有的改变都是必要的，但希望这个例子能引导你找到最终的解决方案。

1) views from template 的做法不同。（我做了硬编码。）

 var index = new kendo.View('index'); 

2) MVVM 使用的列表视图应在以下way 中创建

3) 如前所述，您应该将 model.set(key,value) 与您的 observables 一起使用

pageViewModel.set("photossource", set1) 

4) 注意初始化控件的顺序

【参考方案2】：

使用 Kendo UI 视图基本上消除了调用 kendo.bind 的需要。推荐的方法是分配一个ViewModel to the view。之后，您可以在必要时填充其照片源字段。顺便说一句，在视图模型上执行的任何操作都应该通过 set 和 get 方法完成。