3

在与 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 似乎有其细微之处，但一开始很多东西令人困惑。

4

1 回答 1

3

首先简短的回答：

工作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以确保使用正确的控制器时，您应该在传递给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要设置正确控制器内容的位置，您应该挂钩该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到目前为止看起来相当简单，只包括两个函数并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);
  }
});

希望能帮助到你。

于 2013-08-29T11:13:05.120 回答