1

不知何故，我不明白如何使用 ember.js 实现需要某个控制器的视图。我将尝试用一个示例来解释我运行的问题：

假设我想构建一个视图组件来创建一个简单的待办事项列表：它包含一个文本字段。该字段下方是迄今为止已输入的所有待办事项的列表。该视图应该有一个存储待办事项项目的控制器（因为我不必在那时推动将它们持久存储）。

我希望该视图可以在 webapp 的不同位置使用（通过我的车把模板），因此它应该独立于访问它的路径。

我的模板如下所示：

<?xml version="1.0" encoding="utf-8"?>
<html>
  <head>
    <script src="../shared/libs/jquery-1.9.1.js"></script>
    <script src="../shared/libs/handlebars-1.0.0-rc.3.js"></script>
    <script src="../shared/libs/ember-1.0.0-rc.1.js"></script>
    <script src="todo.js"></script>
  </head>
  <body>
    <script type="text/x-handlebars" data-template-name="application">
      {{ view App.TodolistView }}
    </script>

    <script type="text/x-handlebars" data-template-name="todolistView">
      {{view App.CreateTodoTextField
        placeholder="Enter your todo here"
        size=100
        }}
       <ul>
        {{#each todo in controller}}
          <li>{{todo}}</li>
        {{/each}}
      </ul>
    </script>
  </body>
</html>

我的应用程序逻辑如下所示：

window.App = Ember.Application.create();

App.TodolistView = Ember.View.extend({
  templateName: 'todolistView'
});

App.TodolistController = Ember.ArrayController.create({
  content: [],
  createItem: function(item) {
     this.pushObject(item);
  }
});

App.CreateTodoTextField = Ember.TextField.extend({
  insertNewline: function() {
    var value = this.get('value');
    if (value) {
      App.TodolistController.createItem(value);
      this.set('value', '');
    }
  }
});

我对该代码有两个问题：

当我的 TodolistView 尝试使用

{{#each todo in controller}}

它实际上访问的是 ApplicationController，而不是 TodolistController

也叫

App.TodolistController.createItem(value);

对我来说似乎是个坏主意：即，如果我在一页上有两个 TodoListViews 怎么办？应该在 TodolistController 的当前实例上调用 createItem...

可能我错过了用 ember.js 定义视图的核心概念......

4

2 回答 2

1

感谢您的提示，这对我有用，但我仍然不确定这是否是它打算使用的方式：

哈佛商学院

<script type="text/x-handlebars" data-template-name="todolistView">
  {{view App.CreateTodoTextField
    placeholder="Enter your todo here"
    size=100}}
     <ul>
      {{#each todo in controllers.todolist}}
        <li>{{todo}}</li>
      {{/each}}
    </ul>
</script>

App.ApplicationController = Ember.Controller.extend({   
  needs: ['todolist']
});

JS

App.CreateTodoTextField = Ember.TextField.extend({
  insertNewline: function() {
    var value = this.get('value');
    if (value) {
      this.get('controller').get('controllers.todolist').createItem(value);
      this.set('value', '');
    }
  }
});
于 2013-02-22T12:24:08.903 回答
1 
App.CreateTodoTextField = Ember.TextField.extend({
  insertNewline: function() {
    var value = this.get('value');
    if (value) {
      App.TodolistController.createItem(value);
      this.set('value', '');
    }
  }
});

Todoliscontroller 不能这样访问。只有它的实例可以通过以下方式访问：

var controller = this.get('controller');
controller.controllerFor('todolist').createItem(value);
于 2013-02-22T11:03:26.087 回答