为模板渲染设置控制器

提问者：小点点

为模板渲染设置控制器

我最近决定看看Ember. js在过去的两年里与KO。首先要注意的是，复杂性似乎是一个TAD陡峭，但我将占上风：）

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

    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>

我尝试在渲染（）调用中设置控制器：“App. todos Controller”，但没有任何效果。视图中的#each只接受App.todos Controller.content，这似乎不正确。为什么我甚至需要明确声明它应该读取的内容，这不是自动设置的吗？

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

共1个答案

匿名用户

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

您在代码中有一些误解，我已经将其更改为更像灰烬，这导致了这个非常简单的示例。

<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确保使用了正确的控制器时，您应该在传递给渲染函数的哈希中定义它：

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

因为你没有发布你的路线图，而且因为你使用的是IndexRouterenderTemplate钩子，我假设你的todocList是在访问'/'时直接渲染的，所以为了简洁起见，这里有一个简单的路由器映射，在访问'/'时渲染todocList模板

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

现在您有一个Todos ListRoute要在其中设置以更正控制器内容，您应该挂钩到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);
  }
});

到目前为止，Todos ListController看起来相当简单，只包括两个函数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);
  }
});

希望有帮助。