Ember.js - 各ループからボタンのアクションを独自のモデルにバインド

Question

#eachテンプレートループ内で生成されたボタンをクリックして、関連するモデルにクリックアクションをバインドすることはできません。ここでは、問題の迅速なデモは...だ

Ember.jsアプリのセットアップ：

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

Contacts.Person = Ember.Object.extend({ 
    first: '', 
    last: '', 
    save: function() { 
     // send updated information to server. 
    } 
}); 

Contacts.contactsList = Ember.ArrayController.create({ 
    content:[], 
    init: function() { 
     this.pushObject(Contacts.Person.create({ 
      first:'Tom', 
      last:'Riddle' 
     })); 
    } 
}); 

テンプレート：

<script type="text/x-handlebars"> 
    {{#each Contacts.contactsList}} 
    <li> 
     {{view Ember.TextField valueBinding="first" viewName="firstname"}} 
     {{view Ember.TextField valueBinding="last" viewName="lastname"}} 
     <button {{action "save" on="click"}}>Save</button> 
    </li> 
    {{/each}} 
</script> 

問題：このシンプルで

ので、アイデアデモのシナリオは、各レコードの「保存」ボタンが、それ自身のモデルの状態を保存するアクションをトリガーすることです。ただし、[保存]ボタンをクリックすると、エラーを与える：

Uncaught TypeError: Cannot call method 'call' of undefined 

私の仮定は、ボタンのアクションとして「保存」を指定すると、そのモデルのsaveメソッドにそれを結合するであろうということでしょう。しかし、これは当てはまりません。他のいくつかのオブジェクトはクリックアクションを処理しているように見え、 "保存"ハンドラは未定義です。私はここに何かを逃していますか各広告申込情報のボタンを独自のモデルでハンドラー呼び出しするにはどうすればよいですか？

ありがとうございました！

Answer 1

あなたが設定することで、アクションのターゲットを定義することができます - http://jsfiddle.net/pangratz666/FukKX/を参照してください、targetプロパティ - 驚きを：

<script type="text/x-handlebars" > 
    {{#each Contacts.contactsList}} 
    <li> 
     {{view Ember.TextField valueBinding="first" viewName="firstname"}} 
     {{view Ember.TextField valueBinding="last" viewName="lastname"}} 
     {{#with this as model}} 
      <button {{action "save" target="model"}}>Save</button> 
     {{/with}} 
    </li> 
    {{/each}} 
</script>​ 

何とかアクションヘルパーはとしてthisを受け付けないため、アクションの周り{{#with}}ヘルパーが必要とされていますtarget。

---

あなたのデザインに注意してください：アクションはビューまたはコントローラで呼び出される必要があります。

ハンドル：

<script type="text/x-handlebars" > 
    {{#each Contacts.contactsList}} 
    <li> 
     {{view Ember.TextField valueBinding="first" viewName="firstname"}} 
     {{view Ember.TextField valueBinding="last" viewName="lastname"}} 
     <button {{action "save" target="Contacts.contactsController" }}>Save</button> 
    </li> 
    {{/each}} 
</script>​ 

JavaScriptの：ターゲットはhttp://jsfiddle.net/pangratz666/U2TKJ/を参照してください、次のようにだから私はあなたの例を実装するだろう...、そして

節約のような更なるアクションを実行する責任があります

Contacts.contactsController = Ember.Object.create({ 
    save: function(event) { 
     console.log('do something with: ', event.context); 
    } 
}); 

Answer 2

YS

{{#each answer in effort_reasons itemController="module_answer"}} 
{{/each}} 

ので、各項目は、モデルが各項目（この場合の答えで）である、独自のコントローラを取得し、これはvalueBindingが同じにすべての入力ビューを結合につながる入力ビューのようなもののために特に便利です値。これはエンバーのコントローラはシングルトンではない、とあなたはあなたのitemController内部

this.get('controller.parentController') 

を介して基準を得ることができ、元のコントローラに値を保存したい場合は、異なるID'sを持っている唯一の時間であることに注意してください。

それとも、

{{action "actionname" parameter paramter2...}}