jQuery中的Backbone.js事件

我試圖用Backbone事件擴展現有的jQuery小部件，以便它們可以發佈可以被偵聽的Backbone事件。我的策略是在小部件的本地事件回調方法內部代理事件。例如，在jQueryUI滑塊小部件的change事件中，我想觸發一個名爲「trigger」的事件。我的難題是，這個代碼按預期工作：jQuery中的Backbone.js事件

$(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: function(event, ui) { 
    $(this).trigger("trigger", ui.value); 
}

...完全封裝了小部件，而不用擔心小部件的實際單例實例。我的問題是，這第二種方法不起作用，我想知道是否有人可以向我解釋爲什麼。在Firebug中，$（this）和$ slider都指向同一個DOM元素。

來源

2013-04-16 Jake

更改處理程序的上下文（this）是觸發事件的DOM元素。這是您已經分配給您的$slider變量的DOM元素。

我認爲你可能會不必要地使事情複雜化，儘管可能我並不完全明白你想要做什麼。但是，您應該可以使用內置的events hash來獲取插件在骨幹網view的子元素上觸發的事件。試試下面的（看看小提琴here）：

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-16 15:34:53

我一直在玩這個例子整個下午，我甚至不能讓頁面上的滑塊渲染，更不用說以被禁止的方式來拾取事件。請指教。 – Jake

對不起傑克 - 應該更清晰/更準確。我已經檢查了jQuery UI文檔並且適當地更新了答案。我還創建了一個小提琴（http://jsfiddle.net/dP8tK/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-16 23:32:56

jQuery中的Backbone.js事件

回答

相關問題