Question

我最近决定在与KO度过最后两年之后研究Ember.js。首先要注意的是，复杂性似乎有点陡然但我会占上风：）

现在，我似乎需要为某个模板硬编码控制器，这看起来很奇怪：

    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（）调用中设置控制器：'App.todosController'，但没有。视图中的#each只接受App.todosController.content，这似乎不对。为什么我甚至需要明确说明它应该读取的内容，不是自动设置的吗？

感谢任何帮助，Ember似乎有它的细节，但在开始时很多都令人困惑。

Answer 1

简短回答：

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

更长的回答：

您的代码中存在一些误解，我已将其更改为更类似于此类内容，这导致此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>

IndexRoute

使用renderTemplate确保使用正确的控制器时，您应该在传递给render函数的哈希中定义它：

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

路线图

由于你没有发布你的路线图，而且因为你正在使用IndexRoute renderTemplate钩子，我假设你的todosList在访问'/'时直接呈现，所以只是为了这里简明一个简单的路由器地图，在访问todosList

时呈现'/'模板

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

TodosListRoute

既然你想要设置一个TodosListRoute来纠正控制器内容，你应该挂钩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看起来相当简单，只包含两个函数newTodo和removeTodo，使用模板中action帮助程序传递的标题值：

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

希望它有所帮助。

设置模板渲染的控制器

1 个答案: