如何將事件綁定到ember.js中動態創建的實例

Question

我創建了一個自定義組件，它將包含對視圖的引用（綁定到手柄模板）。 我的模板有一個按鈕，我想附加一個點擊處理程序。

我將動態創建組件的實例並將其附加到不同的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實例。 但這並不是一種干凈的方式。

Answer 1

您可以將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){
    }
})