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

如何将事件绑定到ember.js中动态创建的实例

1 个答案: