3

我正在尝试使用 Backbone 事件扩展现有的 jQuery 小部件，以便它们可以发布可以收听的 Backbone 事件。我的策略是在小部件的本机事件回调方法中代理事件。例如，在 jQueryUI 滑块小部件的更改事件中，我想触发一个名为“触发器”的事件。我的难题是此代码按预期工作：

$(function() {
    var $slider = $("#slider");

    _.extend($slider, Backbone.Events);

    $slider.on("trigger", function(msg){
        alert("triggered: " + msg)
    });

    $slider.slider({
        change: function(event, ui) {
            $slider.trigger("trigger", ui.value);
        }

    });
});

这是我想去的地方的 3/4，但我希望能够在 change 事件中做这样的事情：

change: function(event, ui) {
     $(this).trigger("trigger", ui.value);
}

...完全封装小部件，而不用担心小部件的实际单例实例。我的问题是第二种方法不起作用，我想知道是否有人可以向我解释原因。在 Firebug 中，$(this) 和 $slider 都指向同一个 DOM 元素。

4

2 回答 2

2

更改处理程序 ( this) 的上下文是触发事件的 DOM 元素。这是您已经分配给$slider变量的同一个 DOM 元素。

我认为您可能会不必要地使事情复杂化，尽管可能是我不完全理解您要做什么。view但是，您应该能够使用内置事件散列获取由主干子元素上的插件触发的事件。尝试以下操作（并在此处查看小提琴）： 

var SliderView = Backbone.View.extend({

    // Set the view's el property to existing element in DOM
    el: '#slider-view',

    events: {
        // jQuery UI slider triggers a slidechange event which we can subscribe
        // to using the view's event object 
        'slidechange #slider': 'handleSliderChange'
    },

    render: function() {
        // Worth caching a reference to the element in case we want to refer
        // to it again elsewhere in the view - maybe to clean it up on exit
        this.$slider = this.$el.find('#slider').slider({});
    },

    handleSliderChange: function(e, ui) {
        // Our handler is invoked with the same ui parameter received 
        // by the slider's change handler.
        console.log('Slider changed: ', e, ui.value);
    }
});

// Create and render an instance of the view
new SliderView().render();
于 2013-04-16T15:34:53.983 回答
1

您可以使用_.extend(jQuery.fn, Backbone.Events)将所有事件方法添加到包装的任何内容中$()

看看这个 jsFiddle。 http://jsfiddle.net/Zct7D/

它的工作原理与您正在寻找的类似。我看到的最大不足是您必须使用.trigger绑定 ( .on) 到的同一个引用。

在我使用的示例中。

var derpDiv = $("#derp").on("....
derpDiv.trigger("update....

这样可行。但是这样的事情似乎不起作用。

$("#derp").on("update", function() {});

// somewhere else in the code
$("#derp").trigger("update", "Message");

但是通过一些更多的调整，它可以工作。

于 2013-04-16T23:32:56.867 回答