我试图让这个例子 super (愚蠢)简单,只是为了确保我在脑海中得到具体的概念。
假设我有两个像这样的剑道 View 模型:
var usersViewModel = kendo.observable({
name: "Billy Bob",
address: "123 Maple St",
});
var postsViewModel = kendo.observable({
title: "Cool stuff",
content: "Here is some cool content"
});
kendo.bind($("#users-template"), usersViewModel);
kendo.bind($("#posts-template"), postsViewModel);
(注意:我可能错误地应用了这些绑定(bind) - 如果有更好的方法,请随时告诉我。)
以及将使用这些 View 模型的模板:
<script id="users-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: address"></td>
</tr>
</script>
<script id="posts-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: title"></td>
<td data-bind="text: content"></td>
</tr>
</script>
好的,现在是棘手的部分......
我想要一个 div 容器作为“主视图”。这个 div 将是应用程序索引页面上的第一个项目,所有其他模板都将加载到其中。像这样:
<div id="main-content"></div>
左侧将有一个子导航,其中包含一个无序列表和列表项标签。单击列表项时 - 我计划使用 JQuery 清除“主要内容”div 的内容,并使用单击的相应导航元素的模板填充它。
我试过用这个:
var container = $("#main-content");
container.empty();
container.html("#users-template");
但是,这是行不通的。根据 Kendo 网站,该模板指定了一个“data-template”属性,如下所示:data-template="users-template"
。在 javascript 中使用此属性似乎也不起作用。
基本上,我正在尝试重新创建他们的示例:http://demos.kendoui.com/web/mvvm/source.html 但是...从加载模板的空白 div 开始。
我之前使用 Backbone.js 创建过与此类似的界面元素,而且非常轻松。我只是想知道使用 Kendo 的最佳方法。
如有任何建议,我们将不胜感激。
最佳答案
似乎 Kendo 并不真正支持绑定(bind)到脚本标签内的标签。 这是一个(有点粗糙的)JSFiddle 说明行为:http://jsfiddle.net/9tcav/28/
当我将可观察对象绑定(bind)到 tr-tag 时,当标记仍在 script 标记内时,标记的内容永远不会改变。
但是,如果我实例化模板,将其插入到 main-content-div 中,然后将数据绑定(bind)到生成的呈现 模板,一切正常。
您的数据是否需要动态更改?如果不是,if 可能只是直接使用模板,没有可观察的对象,来呈现数据:
var template = kendo.template($("#template").html());
$("#main-content").html(template({title: "Title", content: "Content"}));
如果您的数据确实必须动态更改 - 不仅是在单击导航链接和实例化 View 时 - 那么您必须先呈现模板,然后然后绑定(bind)数据。
关于javascript - Kendo UI 数据模板 - 如何创建主容器并将模板加载到其中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10098763/