1

Kendo UI のシングル ページ アプリケーション (SPA) と MVVM 機能をテストしていますが、ビューモデルをページのコンテンツであるリストビューにバインドするのに問題があります...

私がこれまでに持っているものは次のとおりです。

<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>

をpage1pageViewModelのにバインドする必要があります。listview13ページpageViewModelでシェアします。

これにより、次のエラーが発生します。


キャッチされていない TypeError: kendo.web.min.js:12で undefined のプロパティ 'parent' を読み取れません

私の主な質問は次のとおりです。

  • ビューモデルをリストビューにバインドするにはどうすればよいですか?

  • リストビューの DataSource を設定する必要がありますか?

  • photossourceリスト アイテムのテンプレートでを参照するにはどうすればよいですか?

4

2 に答える 2

2

Kendo UI ビューを使用すると、本質的に kendo.bind を呼び出す必要がなくなります。推奨される方法は、 ViewModel をビューに割り当てることです。その後、必要に応じて photossource フィールドに入力できます。ところで、ビュー モデルで実行されるすべての操作は、set メソッドと get メソッドを介して実行する必要があります。

于 2013-12-16T13:34:18.657 に答える