Question

我是Ember.js的新手，我在Ember.js上尝试了一个简单的例子，直到现在都很好，但我坚持这个例子。

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

JS： -

    App = Ember.Application.create();

    App.ApplicationController = Ember.Controller.extend({
     });

     App.ApplicationView = Ember.View.extend({
       templateName:"appTemp"
     });

    App.Todo = Ember.Object.extend({
      title:null
    });

     App.TodoController =Ember.ArrayProxy.create({
       content: [],
      addItem: function(title){
            var todo = App.Todo.create({title: title})  ;
            this.pushObject(todo);
           }
     });

      App.TodoController.addItem("hello");
      App.TodoController.addItem("world");

    App.TodoAddView = Ember.View.extend({
       createTodo: function(name){
         App.TodoController.addItem(document.getElementById("todoName").value);
     }
   });

   App.TodoView = Ember.View.extend();

   App.TodosListView = Ember.CollectionView.extend({
     itemViewClass: Ember.View.extend({
    })
   });

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>

所以问题是

我正在显示所有添加的Todos，如下所示

TODO - [todoName]

但未正确打印todoName

所以我无法识别，我在这里犯了什么错误。

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

由于

Answer 1

只需将模板更改为：

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

请参阅http://jsbin.com/iriwow/1/edit

Answer 2

是否有充分的理由使用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/>

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

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

2 个答案: