1

我试图让这个例子超级（愚蠢）简单，只是为了确保我把这个概念具体化。

假设我有两个这样的剑道视图模型：

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

（注意： 我可能错误地应用了这些绑定 - 如果有更好的方法，请随时告诉我。）

以及将使用这些视图模型的模板：

<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="users-template"：在 javascript 中使用此属性似乎也不起作用。

基本上，我正在尝试重新创建他们的示例： http ://demos.kendoui.c​​om/web/mvvm/source.html 但是......从模板加载到的空白 div 开始。

我之前用 Backbone.js 创建了类似的界面元素，而且非常轻松。我只是想知道使用剑道的最佳方法。

任何意见，将不胜感激。

4

1 回答 1

2

似乎 Kendo 并不真正支持绑定到脚本标签内的标签。这是一个（有点粗略的）JSFiddle，说明了这种行为：http: //jsfiddle.net/9tcav/28/

当标签仍在脚本标签内时，当我将可观察对象绑定到 tr-tag 时，标签的内容永远不会改变。

但是，如果我实例化模板，将其插入 main-content-div，然后将数据绑定到生成的渲染模板，一切正常。

您的数据是否需要动态更改？如果不是，如果可能只是使用直接模板，没有可观察的对象，来呈现数据：

var template = kendo.template($("#template").html());
$("#main-content").html(template({title: "Title", content: "Content"}));

如果您的数据确实必须动态更改 - 不仅在单击导航链接和实例化视图时 - 那么您首先呈现模板然后绑定数据。

于 2012-08-10T07:43:20.090 回答