Javascript 对于简单的Todo示例，Ember.js需要有关集合处理程序的帮助

我是新加入Ember.js的，我在Ember.js上尝试了一个简单的例子，直到现在还不错，但我还是坚持这个例子

这里我粘贴了我创建的Todo示例

JS:-

Html：打印todo项目脚本

<script type="text/x-handlebars" data-template-name="appTemp">
  {{#collection App.TodosListView contentBinding = "App.TodoController" }}
  {{#view App.TodoView contentBinding="content"}}
  <label>TODO - {{content.title}}</label>
  {{/view}}
  {{/collection}}
</script>

{{{#collection App.todoListView contentBinding=“App.TodoController”}
{{{#查看App.TodoView contentBinding=“content”}
TODO-{{content.title}
{{/view}
{{/collection}

所以问题是

我将显示所有添加的待办事项，如下所示

TODO-[todoName]

但它没有正确打印todoName

所以我无法确定，我在这里犯了什么错误

   <label>TODO - {{content.title}}</label>

TODO-{{content.title}

---

谢谢

只需将模板更改为：

<script type="text/x-handlebars" data-template-name="appTemp">
  {{#collection App.TodosListView contentBinding="App.TodoController"}}
    {{#view App.TodoView}}
      <label>TODO - {{title}}</label>
    {{/view}}
  {{/collection}}
</script>

{{{#collection App.todoListView contentBinding=“App.TodoController”}
{{{#查看App.TodoView}
TODO-{{title}
{{/view}
{{/collection}

---

请参见

是否有充分的理由使用CollectionView？使用{{{#each}}助手（更易读的imho）可能更容易。因此，备选提案：

使用每个帮助器和内联模板：

<script type="text/x-handlebars" data-template-name="appTemp">
  {{#each todo in App.TodoController }}
  {{#view App.TodoView contextBinding="todo"}}
   <label>TODO - {{title}}</label>
  {{/view}}
  {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="appTemp">
  {{#each todo in App.TodoController }}
  {{view App.TodoView contextBinding="todo"}}
  {{/each}}
</script>
<script type="text/x-handlebars" data-template-name="todoView">
  <label>TODO - {{title}}</label>
</script/>

{{{App.TodoController中的每个todo}
{{{#查看App.TodoView contextBinding=“todo”}
TODO-{{title}
{{/view}
{{/每个}}

使用不带内联模板的每个帮助程序：

<script type="text/x-handlebars" data-template-name="appTemp">
  {{#each todo in App.TodoController }}
  {{#view App.TodoView contextBinding="todo"}}
   <label>TODO - {{title}}</label>
  {{/view}}
  {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="appTemp">
  {{#each todo in App.TodoController }}
  {{view App.TodoView contextBinding="todo"}}
  {{/each}}
</script>
<script type="text/x-handlebars" data-template-name="todoView">
  <label>TODO - {{title}}</label>
</script/>

{{{App.TodoController中的每个todo}
{{view App.TodoView contextBinding=“todo”}
{{/每个}}
TODO-{{title}

---

如您所见，我还建议为您的视图使用contextBinding。您应该始终使用控制器的内容属性，而视图应该始终使用上下文属性。这是一种更加灰暗的方式。正如您在本例中看到的，您不需要在属性路径（{{title}}而不是{{context.title}）之前指定前缀。这种方法使视图更加可重用，因为当与控制器一起使用时，if也可以工作。

非常感谢fpauserThanks mavilein。非常有用的答案。