处理Ember中操作中的事件绑定和回调

Handling event binding and callbacks within actions in Ember

本文关键字:绑定 事件 回调 Ember 操作 处理      更新时间:2023-12-10

这种气味。这个操作的结果应该在页面上注册一个事件处理程序,但我应该放置命名的函数回调(clickHandler)吗?混合饮料?或者可能完全是另一类。

App.StepController = Ember.ObjectController.extend({
    actions: {
        captureStep: function() {
            //Bind the handler to this so callback has access to Controller properties
            var clickHandler = clickHandler.bind(this);
            //Can't do this with jquery, as capture is not cross browser compatible.
            //Setting capture to true on a body event makes this event fire before all others                
            if (document.body.addEventListener) {
                document.body.addEventListener('click', clickHandler, true);
            }
            function clickHandler(event) {
                event.preventDefault(); //Needed for links/buttons
                event.stopImmediatePropagation(); //Stop the event from bubbling and prevent 'same element' event handlers 
                //Determine clickTarget...
                console.log("Clicked: " +  clickTarget);
                this.set('model.targetPath', clickTarget);
                // remove this handler from the body
                document.body.removeEventListener(event.type, clickHandler, true);
            }
        }
    }
});

Ember视图将为您处理页面事件;无需编写自己的事件处理程序:

App.StepView = Ember.View.extend({
    click: function(event) {
           this.get('controller').set(...);
        }
    }
});

或者,您可以使用链接或操作操作来处理单击事件。