将viewmodel绑定到listview
我正在测试Kendo UI的单页应用程序SPA和MVVM功能,但在将Viewmodel绑定到页面内容的listview时遇到了一些问题 到目前为止,我得到的是:将viewmodel绑定到listview,listview,mvvm,kendo-ui,single-page-application,Listview,Mvvm,Kendo Ui,Single Page Application,我正在测试Kendo UI的单页应用程序SPA和MVVM功能,但在将Viewmodel绑定到页面内容的listview时遇到了一些问题 到目前为止,我得到的是: <div id="app"> <button data-bind="click: gotopage1">Page 1</button> <button data-bind="click: gotopage2">Page 2</button> <bu
<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个页面中共享
这给了我以下错误:
未捕获的TypeError:无法读取中未定义的属性“parent”
kendo.web.min.js:12
我的主要问题是:
如何将viewmodel绑定到listview
我需要设置listview的数据源
如何在列表项的模板中引用Photosource
使用Kendo UI视图基本上不需要调用Kendo.bind。建议的方法是指定一个。之后,您可以在必要时填充其Photosource字段。顺便说一下,对视图模型执行的任何操作都应该通过set和get方法来完成 使用Kendo UI视图基本上不需要调用Kendo.bind。建议的方法是指定一个。之后,您可以在必要时填充其Photosource字段。顺便说一下,对视图模型执行的任何操作都应该通过set和get方法来完成 这是一个毫无例外的解决方案,我相信它的功能正如您所期望的那样 我改变了很多东西,我并不是说所有的改变都是必要的,但希望这个例子将引导您走向最终的解决方案 1的做法有所不同。我做了硬编码
var index = new kendo.View('index');
2 MVVM使用的listview应在以下步骤中创建
3如前所述,您应该使用model.setkey,value和您的观察值
pageViewModel.set("photossource", set1)
4注意初始化控件的顺序这是一个毫无例外的解决方案,我相信功能与您预期的一样
我改变了很多东西,我并不是说所有的改变都是必要的,但希望这个例子将引导您走向最终的解决方案
1的做法有所不同。我做了硬编码
var index = new kendo.View('index');
2 MVVM使用的listview应在以下步骤中创建
3如前所述,您应该使用model.setkey,value和您的观察值
pageViewModel.set("photossource", set1)
4注意初始化控件的顺序