5

#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そのモデルのメソッドにバインドされると思います。しかし、そうではないようです。他のオブジェクトがクリック アクションを処理しているように見えますが、「保存」ハンドラは定義されていません。ここで何か不足していますか？各項目のボタンが独自のモデルでハンドラーを呼び出すようにするにはどうすればよいですか?

助けてくれてありがとう！

4

2 に答える 2

10

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

<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>​

{{#with}}どういうわけかアクションヘルパーはthisとして受け入れないので、アクションの周りのヘルパーが必要ですtarget。

ただし、設計に関する注意事項：アクションはビューまたはコントローラーで呼び出す必要があります。次に、ターゲットは、保存などのさらなるアクションを実行する責任があります...

したがって、次のように例を実装します。http ：//jsfiddle.net/pangratz666/U2TKJ/を参照してください。

ハンドルバー：

<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：

Contacts.contactsController = Ember.Object.create({
    save: function(event) {
        console.log('do something with: ', event.context);
    }
});
于 2012-06-01T16:34:47.340 に答える