Question

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

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

我希望视图可以在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>

My App Logic看起来像这样：

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

对我来说看起来不错：I.e.如果我在一个页面上有两个TodoListViews怎么办？应该在TodolistController的当前实例上调用createItem ...

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

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

Answer 2

感谢您的提示，这对我有用，但我仍然不确定这是否是它的预期用途：

HBS

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

如何使用ember.js为视图定义控制器？

2 个答案: