0

私はEmbersの入門ガイドに従っていますが、「入門ガイド」のこのステップに関して質問があります: http://emberjs.com/guides/getting-started/marking-a-model-as-complete-incomplete/

つまり、チェックボックスをオン/オフすることで、モデルのブール プロパティを切り替える必要があります。

JSBin のコードは次のとおりです: http://jsbin.com/UDoPajA/1/edit

UIコードを実装しました：

{{input type="checkbox" class="toggle" checked=isCompleted}}

そして、すべてが正常に機能しているようです。UI は正しく更新され、Ember インスペクターはモデルでプロパティが切り替えられていることを通知します。

このガイドでは、次のようにコントローラーを追加するようにも指示されています。

Todos.TodoController = Ember.ObjectController.extend({
  isCompleted: function(key, value){
    var model = this.get('model');

    if (value === undefined) {
      // property being used as a getter
      return model.get('isCompleted');
    } else {
      // property being used as a setter
      model.set('isCompleted', value);
      model.save();
      return value;
    }
  }.property('model.isCompleted')
});

この時点で、ガイド (同じ手順) で定義されている TodoController は冗長ですか? そうでない場合、それは何を追加しますか?

4

3 に答える 3

1

このコードが冗長であると思われる原因は、このコードがこのステップで「モデル」を追加していると考えていることだと思います。あなたの声明によると：「ガイドには、次のようにモデルを追加するようにも指示されています。」

でも、

モデルを表すために使用されるコードは同じです。

 Todos.Todo = DS.Model.extend({
   title: DS.attr('string'),
   isCompleted: DS.attr('boolean')
 });

そのモデルを使用するフィクスチャ データは同じです。

Todos.Todo.FIXTURES = [
  {
    id: 1,
    title: 'Learn Ember.js',
    isCompleted: true
  },
  {
    id: 2,
    title: '...',
    isCompleted: false
  },
  {
    id: 3,
    title: 'Profit!',
    isCompleted: false
  }
];

このステップで行っていることは、コントローラーを追加することです。より具体的には、todo の各インスタンスを制御する ObjectController を追加し、適切なデータをモデルにプロキシします。この時点での適切なデータは「isCompleted」値です。しかし、どのようにしてオブジェクトにたどり着くのでしょうか? 見てみましょう。

Todos のテンプレート コントローラは次のとおりです: (スペル 'Todos' を確認してください)

Todos.TodosController = Ember.ArrayController.extend({ ... });

ここで必要なのは、その配列内の個々の (オブジェクト) todo アイテムを制御することです(「これは何を追加しますか」と尋ねました)。オブジェクトに戻るには、このコードをハンドルバー テンプレート itemController="todo" に実装します。これにより、各アイテムが「todo」という名前の独自の ObjectController インスタンスにラップされます。

{{#each itemController="todo"}}

各 todo のオブジェクトを取得したので、ObjectController を実装します。

Todos.TodoController = Ember.ObjectController.extend({
  /* same code */
});

次に、各 todo オブジェクトの「isCompleted」プロパティをチェックし、チェックボックスが切り替えられたときにプロパティの値を取得または設定します。

{{input type="checkbox" checked=isCompleted class="toggle"}}

このコードは、「isCompleted プロパティにバインドされたプロパティ「checked」を渡し、クラス「toggle」を設定する「チェックボックス」をレンダリングする Ember の入力ヘルパーを使用します。

これはモデルのブール値であるため、切り替えたときに true または false を返します。コントローラーは、計算されたプロパティを設定することにより、「isCompleted」値への変更を監視しています。

...}.property('model.isCompleted')

これにより、コントローラーにアラートが送信され、変更のテンプレートが更新されます。また、モデルを保存します。

model.save();

それが解決するかどうかはわかりませんが、そうであることを願っています。ハッピーコーディング!!

于 2013-10-29T02:51:42.567 に答える