ember.js - 子视图未处理 emberjs 中的事件

Question

我有一个模板作为页面的一部分，如下所示：

<script type="text/x-handlebars" data-template-name="listbeer">

    <table>
    {{#each content}}
        {{#view "DHApp.BeerrowView"}}
        <tr>
            <td><button>{{name}}</button></td>
            <td>{{brewery}}</td>
        </tr>   
        {{/view}}

    {{/each}}
    </table>
</script>

我还有两个视图，一个封装表格，一个封装行。当我点击按钮时，只有父（整个表）视图点击处理程序被调用（下面的那个说父拾取点击）。我无法调用子视图处理程序。有什么想法，为什么我尝试了各种各样的事情却无处可去？

视图代码如下所示：

DHApp.BeerrowView = Ember.View.extend({
        click: function(evt) {
            alert("ClickableView was clicked!");
        }
    });

DHApp.ListbeerView = Ember.View.extend({
        templateName: 'listbeer',
        click: function(evt) {
            alert("parent picked up view");
        }
    });

谢谢

Answer 1

您需要BeerrowView通过以下方式定义您的：

DHApp.BeerrowView = Ember.View.extend({
    tagName: 'tr',
    click: function(evt) {
        alert("ClickableView was clicked!");
    }
});

和模板：

<script type="text/x-handlebars" data-template-name="listbeer">

    <table>
        {{#each content}}
            {{#view "DHApp.BeerrowView"}}
                <td><button>{{name}}</button></td>
                <td>{{brewery}}</td>
            {{/view}}

       {{/each}}
    </table>
</script>

div之后的原因是如果您不定义标签名称，视图会添加额外的内容。
请参阅ember 查看指南以获取更多参考。