與Backbone.js一起使用jQuery插件的最佳做法是什麼

我正在使用jQuery UI和使用backbone.js的rails應用程序。我想製作一個可拖動的元素？我在哪裏必須把這個功能：與Backbone.js一起使用jQuery插件的最佳做法是什麼

$('.area-tools').draggable({handle: ".grap-area", "containment" : "parent"})

它是在視圖上？渲染功能之後？因爲初始化函數沒有找到我的元素，我認爲DOM尚未創建？

所以，我這樣做：

class Myapp.Views.Tools extends Backbone.View 
    template: JST['pdfs/tools'] 

    tagName: "div" 

    className: "pdf-tools" 

    events: 
    'click div.rect' : 'drawRect' 

    initialize: -> 
    @previewWrapper = $('.preview') 
    @count = 0; 
    @ 

    render: -> 
    $(@el).html(@template()) 

    @initColorPicker() 

    this 

    initColorPicker: -> 
    $('.area-tools').draggable({handle: ".grap-area", "containment" : "parent"}) 


    drawRect: (event) => 
    newElement = $('<div id="resizable" class="resizable"><div class="close">x</div><input type="text" name="text_' + @count++ + '" /></div>'); 
    @previewWrapper.append(newElement); 
    newElement.draggable().resizable();

是好？任何建議？

來源

2012-08-22 Sebastien

我只是在將timeago插件集成到我的rails/backbone.js應用程序時遇到了同樣的問題。

我的解決方案與您的解決方案几乎相同，只是將該插件應用於整個文檔而不是將其應用於視圖元素。即你的選擇之前添加this：

initColorPicker: -> 
    @.$('.area-tools').draggable({handle: ".grap-area", "containment" : "parent"})

這令正在與您一同侷限於打電話給你從插件，這是非常重要的特定視圖插件做什麼的範圍內。

來源

2012-08-22 06:45:17

您的分析是正確的，除非您的視圖附加到Dom，否則您的代碼將無法工作。您現在有多個選項：

通過events選項將事件處理移動到視圖中。然後我會建議將事件處理程序附加到您的視圖。
通過the el option在創建過程中將視圖添加到dom中。閱讀此post，特別是「從其他DOM元素解耦視圖」部分
遵循shioyama的建議，是解決您的問題的第三個選項。

所有3這些應該解決您的問題。但所有3個都是最佳實踐，所以您可能需要全部應用3.

來源

2012-08-22 06:50:51 schacki

與Backbone.js一起使用jQuery插件的最佳做法是什麼

回答

相關問題