javascript - Kendo UI 数据模板 - 如何创建主容器并将模板加载到其中？

Question

我试图让这个例子 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 的最佳方法。

如有任何建议，我们将不胜感激。

Answer 1

似乎 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)数据。