0

我是 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：打印待办事项脚本

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

所以问题是

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

TODO - [todoName]

但它没有正确打印 todoName

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

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

谢谢

4

2 回答 2

1

是否有充分的理由使用 CollectionView？使用 {{#each}} 帮助器可能更容易（恕我直言更具可读性）。因此替代建议：

使用 each 助手和内联模板：

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

在没有内联模板的情况下使用 each 助手：

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

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

于 2013-03-19T09:05:45.637 回答
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

于 2013-03-19T08:56:01.997 回答