1

現在、最新のember.jsリリースで遊んでおり、単純な「ユーザー名の追加/ユーザー名の削除」helloworldアプリを作成しています。これまでのところ、ユーザーを追加できます（以下のコントローラーメソッドを使用）。また、HTMLにチェックボックスがあり、クリックするとユーザーが削除されますが...現在、チェックボックスのブール値のみを取得して渡すことができます。代わりに、ユーザー名を検索してコントローラーのコンテンツから削除する必要があります。

bool値の代わりに実際のユーザー名を渡すことができるように、以下のhtml /ビューコードを再実行するにはどうすればよいですか？

前もって感謝します！ 

    PersonApp.ModifyPersonCheckbox = Em.Checkbox.extend({
      change: function(event) {
        PersonApp.personController.removePerson(this.$().val());                                     
      },
    });

    PersonApp.personController = Em.ArrayProxy.create({
      content: [],

      createPerson: function(username) {
        var person = PersonApp.Person.create({ username: username });
        this.pushObject(person);
      },

      removePerson: function(username) {
        person = this.content.findProperty('username', username);
        this.removeObject(person);
      }

    });

以下の基本的なhtmlは、checkedBindingがどのように接続されているかを示しています。

<ul>
  {{#each PersonApp.personController}}
    <li {{bindAttr class="isActive"}}>
      <label>                                                                              
        {{view PersonApp.ModifyPersonCheckbox checkedBinding="isActive"}}
        {{username}}
      </label> 
    </li>
  {{/each}}
</ul>
4

2 に答える 2

1

イベントがトリガーされたときにコンテキストが渡されるように、チェックボックスを表示するビューにコンテンツを設定する必要があります。私はこれがうまくいくと信じています：

{{view PersonApp.ModifyPersonCheckbox contentBinding="parentView.content" checkedBinding="isActive"}}

次に、変更関数のイベント変数には、そのチェックボックスに関連付けられたレコードを含むコンテキスト変数が含まれます。そうすれば、コントローラーで検索する必要もありません。ユーザー名をバインドすることもできますが、この方法の方がわかりやすくなります。

于 2012-08-31T02:35:32.330 に答える
1

最終的な解決策は次のようになります（マークアップへのcontentBinding = "this"の追加に注意してください）

    PersonApp.ModifyPersonCheckbox = Em.Checkbox.extend({
      content: null,
      change: function(event) {
        PersonApp.personController.removePerson(this.content);                                     
      },
    });

    PersonApp.personController = Em.ArrayProxy.create({
      content: [],

      createPerson: function(username) {
        var person = PersonApp.Person.create({ username: username });
        this.pushObject(person);
      },

      removePerson: function(person) {
        this.removeObject(person);
      }

    });

<ul>
  {{#each PersonApp.personController}}
    <li {{bindAttr class="isActive"}}>
      <label>                                                                              
        {{view PersonApp.ModifyPersonCheckbox contentBinding="this" checkedBinding="isActive"}}
        {{username}}
      </label> 
    </li>
  {{/each}}
</ul>
于 2012-08-31T04:00:31.247 に答える