ember.js - 设置模板渲染的 Controller

Question

在经历了过去两年的 KO 之后，我最近决定研究一下 Ember.js。首先要注意的是，复杂性似乎更加陡峭，但我会获胜:)

现在，我似乎需要对某个模板的 Controller 进行硬编码，这看起来很奇怪:

    App.IndexRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('todosList', { into: 'application' });
  }
});

    App.todosController = Ember.ArrayController.create({
      content: [App.Todo.create(), App.Todo.create()]
});

<script type="text/x-handlebars" data-template-name="application">
            {{outlet}}
        </script>

<script type="text/x-handlebars" data-template-name="todosList">
            <ul id="todo-list">
                {{#each todo in App.todosController.content}}
                <li>
                    <label {{bindAttr class="todo.isCompleted"}}>{{view Ember.Checkbox checkedBinding="todo.isCompleted"}} {{todo.title}}</label>
                    <button {{action 'removeTodo' todo target="App.todosController"}}>Ta bort</button>
                </li>
                {{/each}}
            </ul>
            {{view Ember.TextField valueBinding="App.todosController.newTodoText"}}
            <button {{action 'newTodo' App.todosController.newTodoText target="App.todosController"}}>New todo</button>
        </script>

我尝试在 render() 调用中设置 Controller :'App.todosController'，但什么也没有。 View 中的 #each 除了 App.todosController.content 之外不接受其他任何内容，这似乎不正确。为什么我需要明确声明这是它应该读取的内容，这不是自动设置的吗？

感谢您的帮助，Ember 似乎有其优点，但一开始却很令人困惑。

Answer 1

首先简短回答:

工作 jsbin: http://jsbin.com/usaluc/8/edit

更长的答案:

您的代码中有一些误解，我已将其更改为更像 Ember ，这会导致 very simple example .

todosList 模板

<script type="text/x-handlebars" data-template-name="todosList">
  <ul id="todo-list">
    {{#each todo in controller}}
      <li>
        <label {{bindAttr class="todo.isCompleted"}}>
          {{view Ember.Checkbox checkedBinding="todo.isCompleted"}} {{todo.title}}
        </label>
        <button {{action 'removeTodo' todo target="controller"}}>Remove toto</button>
      </li>
    {{/each}}
  </ul>
  {{view Ember.TextField valueBinding="newTodoText"}}
  <button {{action 'newTodo' newTodoText target="controller"}}>New todo</button>
</script>

索引路由

当使用renderTemplate来确保使用正确的 Controller 时，您应该在传递给render函数的哈希中定义它:

App.IndexRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('todosList', {
      into: 'application',
      controller: 'todosList'
    });
  }
});

路线图

由于您没有发布路线图，而且由于您正在使用 IndexRoute renderTemplate Hook ，因此我假设您的 todosList 在访问 时直接呈现/'，所以为了简洁起见，这里有一个简单的路由器映射，在访问 '/'

时呈现 todosList 模板

App.Router.map(function() {
  this.resource('todosList', {path: '/'});
});

待办事项列表路由

现在您已经有了一个 TodosListRoute ，您想要在其中设置正确的 Controller 内容，您应该 Hook setupController 函数并执行以下操作:

App.TodosListRoute = Ember.Route.extend({
  setupController: function(controller, model) {
    var myTodos = [
      App.Todo.create({title: 'Drink water', text:'foo'}), 
      App.Todo.create({title: 'Bring out the trash', text:'bar'})
    ];
    controller.set('content', myTodos);
  }
});

TodosListController

到目前为止，TodosListController 看起来相当简单，仅包含使用从 action 传递的标题值的两个函数 newTodo 和 removeTodo模板中的 助手:

App.TodosListController = Ember.ArrayController.extend({
  newTodo: function(title) {
    var todo = App.Todo.create({title: title, text:'foo'});
    this.get('content').pushObject(todo);
  },
  removeTodo: function(todo) {
    this.get('content').removeObject(todo);
  }
});

希望有帮助。