Question

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

我创建了一个允许超级英雄注册的视图模型。

我在工作的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（viewModel）：

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

现在，我正在尝试让View循环显示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>

Answer 1

你有一些错误。

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

您传递给模板的对象也始终存储在＆＃34; data＆＃34;变量

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

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

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

希望有所帮助

在Kendo View模板中显示数组（来自ViewModel）

1 个答案: