在Kendo视图模板中显示数组（从ViewModel）

Question

在工作中，我刚刚开始使用JavaScript，MVVM和Kendo的JS框架，并且我有一个相当简单的问题。

我创建了一个允许超级英雄注册的View Model。

的JSBin我在工作：http://jsbin.com/gewu/3/edit?html,js,output

这里是HTML（视图）：

<div id="view"> 

    Superhero: <input data-bind="value: name" /><br/> 
    Superpower: <input data-bind="value:power"type="text"> 
    <label for="">from Earth?<input type="checkbox" data-bind="checked:fromEarth"></label> 
    <button data-bind="click: registerHero" >Display User Info</button> 

<div id="array-display"></div> 
<p>Entries: <span data-bind="text: knownHeroes.length"></span></p> 


</div> 

而这里的JS（视图模型）：

var viewModel = kendo.observable({ 

    knownHeroes : [], 

    name: "Hulk", 
    power:"Stength", 
    fromEarth: true, 

    registerHero: function() { 
     var name = this.get("name"); 
     var power = this.get("power"); 
     var fromEarth = this.get("fromEarth"); 
    this.knownHeroes.push({"name":name,"power":power,"fromEarth":fromEarth}); 

} 


}); 

kendo.bind($("#view"), viewModel); 

现在的我， m试图让视图循环并显示knownHeroes的数组。但它不会呈现任何东西。我知道数据被推送到数组，因为我可以看到数组长度增加，并且我可以查找数组中的特定值。我假设问题与我在视图中引用数组的方式有关。但我不确定。下面是我写的模板：

HTML：

<script id="registry-view" type="text/x-kendo-template"> 
    <ul> 
    # for (var i=0; i < knownHeroes.length; i++) { # 
    <li> 
     <ul> 
     <li>#= knownHeroes[i].name #</li> 
     <li>#= knownHeroes[i].power #</li> 
     <li>#= knownHeroes[i].fromEarth #</li> 
     </ul> 
    </li> 

    # } # 
</ul> 
</script> 

<script type="text/javascript"> 
     var template = kendo.template($("#registry-view").html()); 
     $("#array-display").html(template); //Append the result 
</script> 

Answer 1

你已经得到了一些错误。

首先你得到了脚本写在这个jsbin的html部分以及JavaScript部分。 Html部分首先执行，因此viewModel尚未定义（检查控制台是否有错误）

此外，您传递给模板的对象始终存储在“数据”变量中。使用您的德兴时

去年的错误是，任何时候你添加任何新的数据行，整个模板需要重新加载（包括所有先前添加的数据行）

我纠正了一些在以下jsbin你的错误：http://jsbin.com/jomemuko/1/edit（实际上，您需要点击Run with JS按钮才能使其工作 - 一些脚本加载问题我没时间了）

理想情况下，您应该使用listView小部件并为其分配一个模板，仅用于一个项目。同样在viewModel中，您应该创建一个kendo数据源并将其作为选项传递给新创建的listView。然后在viewModel中，您应该优化您的registerHero函数，使其将数据源添加到英雄。窗口小部件应该自动刷新。

希望它有帮助