Javascript 余烬嵌套组件动作
我已经浏览了所有的答案和谷歌搜索结果,我发现这是一个非常普遍的问题。不幸的是,非政府组织帮助我解决了我的案子 我有一个自定义按钮:Javascript 余烬嵌套组件动作,javascript,ember.js,Javascript,Ember.js,我已经浏览了所有的答案和谷歌搜索结果,我发现这是一个非常普遍的问题。不幸的是,非政府组织帮助我解决了我的案子 我有一个自定义按钮: App.ButtonCmpComponent = Ember.Component.extend({ tagName: 'button', classNameBindings: ['btn', 'class'], btn: 'btn', class: 'btn-default', attributeBindings: ['
App.ButtonCmpComponent = Ember.Component.extend({
tagName: 'button',
classNameBindings: ['btn', 'class'],
btn: 'btn',
class: 'btn-default',
attributeBindings: ['type'],
type: 'button',
click : function () {
this.sendAction();
}
});
以及按钮组组件:
App.ButtonGroupCmpComponent = Ember.Component.extend({
});
使用此模板:
{{#each btn in definition}}
{{button-cmp action=btn.action}}
{{/each}}
在我的索引控制器中,我有以下内容:
App.IndexController = Ember.ObjectController.extend({
actions: {
test : function () {
alert('test in index controller')
}
}
});
索引视图通过一个简单的散列来定义内容:
App.IndexView = Ember.View.extend({
templateName: 'views/index',
buttonGroup : [
{ label : "Test Action", action : 'test' },
{ label : 'Other Btn', action : 'test' }
]
});
最后在索引视图中:
{{button-cmp action="test"}}
{{btn-group-cmp definition=view.buttonGroup}}
我的问题是,直接在视图上定义的第一个按钮确实会触发索引控制器中的正确操作,但按钮组控制器中的两个按钮不会。事实上,我甚至无法从嵌套组件中识别这些操作发送到的目标
我做错了什么?如何定义嵌套的按钮组件,使其仍然将操作发送到同一索引控制器处理程序
多谢各位
编辑:
通过反复试验,我找到了如何将操作导向正确的控制器。我不认为我完全理解它是如何工作的,尽管如此,请在这里发布一个答案,解释到底发生了什么。。。我真的希望我的头脑最终能明白这一点
我就是这样做到的:
在索引视图中,我向组件调用添加了一个target=this
,如下所示:
{{btn-group-cmp definition=view.buttonGroup target=this}}
然后,将targetObject=view
添加到嵌套组件调用中,如下所示:
{{#each btn in definition}}
{{button-cmp action=btn.action targteObject=view}}
{{/each}}
这导致view.buttonGroup
中定义的操作被正确发送到视图控制器,而不是我未知的位置