1

我创建了一个自定义组件，它将包含对视图的引用（绑定到车把模板）。我的模板有一个按钮，我想给它附加一个点击处理程序。

我将动态创建组件的实例并将其附加到不同的 div。但我的问题是如何将视图挂钩到相应组件实例中定义的事件处理程序。

    App.ImageView = Ember.View.extend({
        "templateName" : "image-template",
        "imagePath" : null,
        "controller" : null
    });

    App.ImageSwitcher = Ember.Object.extend({
        renderTo : null,
        init: function(){
            this.set("view",App.ImageView.create());
        }
        renderOnScreen: function(){
            this.get("view").appendTo(renderTo);
        }
        clickHandler : function(evt){
        }
    })

<script type="text/x-handlebars" data-template-name="image-template">
    <img {{bindAttr src="imagePath"}} />
    <input type="button" value="Change image" />
</script>

组件实例创建：

var component = App.ImageSwitcher.create({renderTo:"#div"});
component.renderOnScreen()


var component1 = App.ImageSwitcher.create({renderTo:"#div1"});
component1.renderOnScreen()

现在我希望按钮调用在相应的 App.ImageSwitcher 实例中定义的 clickHandler。有什么办法吗。我试图在视图中引用 App.ImageSwitcher 实例。但这不是一种干净的方式。

4

1 回答 1

3

您可以将 Ember.TargetActionSupport 混入您的视图中，然后在其上添加一个单击处理程序，如下所示：

App.ImageView = Ember.View.extend(Ember.TargetActionSupport, {
    templateName: "image-template",
    action: "clickHandler",
    imagePath: null,
    controller: null,
    click: function() {
         this.triggerAction();
    }
});

App.ImageSwitcher = Ember.Object.extend({
    renderTo : null,
    init: function(){
        this.set("view",App.ImageView.create({target: this));
    }
    renderOnScreen: function(){
        this.get("view").appendTo(renderTo);
    }
    clickHandler : function(evt){
    }
})
于 2012-06-05T14:00:19.283 回答