1

どういうわけか、特定のコントローラーを必要とするビューを ember.js で実装する方法がわかりません。例を使用して実行する問題を説明しようとします。

簡単な todo リストを作成するビュー コンポーネントを作成したいとしましょう。これにはテキスト フィールドが含まれています。そのフィールドの下には、これまでに入力されたすべての Todo アイテムのリストがあります。そのビューには、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>

私のアプリロジックは次のようになります。

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

そのコードには 2 つの問題があります。

TodolistView がコントローラーにアクセスしようとすると、

{{#each todo in controller}}

TodolistController ではなく、ApplicationController に実際にアクセスします。

また、呼び出し

App.TodolistController.createItem(value);

私には悪い考えのように見えます: つまり、1 つのページに 2 つの TodoListView があるとしたらどうでしょうか? createItem は TodolistController の現在のインスタンスで呼び出す必要があります...

おそらく、ember.js でビューを定義するための中心となる概念が欠けています...

4

2 に答える 2

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 に答える
1

ヒントをありがとう、これは私にとってはうまくいきますが、これが意図した使用方法であるかどうかはまだわかりません:

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', '');
    }
  }
});
于 2013-02-22T12:24:08.903 に答える