EmberJSコントローラーのactions
内にラップされている場合、あるアクションを別のアクションから呼び出すにはどうすればよいですか?
廃止された方法を使用してアクションを定義する元のコード:
//app.js
App.IndexController = Ember.ArrayController.extend({
// properties
/* ... */
// actions
actionFoo: function() {
/* ... */
this.actionBar();
},
actionBar: function() {
/* ... */
}
});
//app.html
<div class="foo" {{action actionFoo this}}>
<div class="bar" {{action actionBar this}}>
ただし、EmberJS 1.0.0では、上記のようにコントローラー内に直接ではなく、コントローラー内のアクションオブジェクト内にアクションを配置する必要があるという非推奨の警告が表示されます。
推奨事項に従ってコードを更新します。
//app.js
App.IndexController = Ember.ArrayController.extend({
// properties
/* ... */
// actions
actions: {
actionFoo: function() {
/* ... */
this.actionBar(); //this.actionBar is undefined
// this.actions.actionBar(); //this.actions is undefined
},
actionBar: function() {
/* ... */
}
}
});
//app.html
<div class="foo" {{action actionFoo this}}>
<div class="bar" {{action actionBar this}}>
ただし、this
オブジェクトはコントローラーではないように見えるため、アクション内で定義された1つの関数が別の関数を呼び出すことは不可能であることがわかりました。
どうすればこれを行うことができますか?
send(actionName, arguments)
メソッドを使用できます。
App.IndexController = Ember.ArrayController.extend({
actions: {
actionFoo: function() {
alert('foo');
this.send('actionBar');
},
actionBar: function() {
alert('bar');
}
}
});
このサンプルのjsfiddleを次に示します http://jsfiddle.net/marciojunior/pxz4y/