Question

我已经查看了所有答案和我可以找到的谷歌搜索结果，我得到的是它是一个非常常见的问题。不幸的是，没有帮助我解决我的问题。

我有这个自定义按钮：

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

我的问题是直接在视图上定义的第一个按钮确实在索引控制器中触发了正确的操作，但按钮组控制器内的两个按钮却没有。实际上，我甚至无法确定从nest组件中发送这些动作的目标。

我在这里做错了什么？如何定义嵌套按钮组件，使其仍然将操作发送到同一个索引控制器处理程序？

谢谢

修改

通过反复试验，我找到了如何将动作指向正确的控制器。我不认为我完全理解它是如何工作的如此请发一个答案，解释这里到底发生了什么 ...我真的很想得到我的最终绕过这个。

这就是我开始工作的方式：

在索引视图中，我在组件调用中添加了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中定义的操作被正确发送到视图控制器而不是某些未知的位置。

Ember嵌套组件操作

0 个答案: