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 に答える