Javascript 在剑道视图模板中显示阵列（来自ViewModel）

在工作中，我只是同时开始使用JavaScript、MVVM和Kendo的JS框架，我有一个相当简单的问题

我创建了一个视图模型，可以注册超级英雄

我正在使用的JSBin：

以下是HTML（视图）：

现在，我试图让视图循环并显示

knownHeroes

的数组。但它不会呈现任何东西。我知道数据正在被推送到数组中，因为我可以看到array.length在增加，并且我可以在数组中查找特定的值。我假设问题与如何在视图中引用数组有关。但我不确定。以下是我编写的模板：

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>

#对于（var i=0；i

#=knownHeroes[i]。姓名#
#=knownHeroes[i].电源#
#=knownHeroes[i].来自地球#


# } #

var template=kendo.template（$（“#注册表视图”）.html（）；
$（“#数组显示”）.html（模板）//附加结果

您犯了一些错误

首先，您可以在这个jsbin的html部分以及javascript部分编写脚本。Html部分首先执行，因此尚未定义viewModel（检查控制台中的错误）

此外，传递给模板的对象始终存储在“data”变量中

最后一个错误是在使用设计时，无论何时添加任何新的数据行，都需要重新加载整个模板（包括以前添加的所有数据行）

我纠正了您在以下jsbin中的一些错误：（实际上，您需要点击RunwithJS按钮才能使其正常工作-一些我没有时间处理的脚本加载问题）

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

---

希望能有所帮助

非常感谢。。。我上班后会看一看，告诉你进展如何。

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

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