在Backbone.js中使用jQuery插件的最佳实践是什么

我正在使用jQuery UI和使用backbone.js的rails应用程序。我想做一个可拖动的元素？我必须将此函数放在何处：

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

它在观景台上吗？在渲染函数之后？因为initialize函数没有找到我的元素，我想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();

类Myapp.Views.Tools扩展主干.View
模板：JST['PDF/tools']
标记名：“div”
类名：“pdf工具”
活动：
'单击div.rect'：'drawRect'
初始化：->
@PreviewRapper=$（'.preview'）
@计数=0；
@
渲染：->
$（@el）.html（@template（））
@initColorPicker（）
这
initColorPicker:->
$（'.area tools'）.draggable（{handle:.grap area”，“containment:“parent”}）
drawRect：（事件）=>
新元素=$（'x'）；
@previewRapper.append（新元素）；
newElement.draggable（）.resizeable（）；

---

好吗？有什么建议吗

在将插件集成到rails/backbone.js应用程序时，我遇到了同样的问题

我的解决方案与您的几乎相同，只是没有将插件应用于整个文档，而是将其应用于视图元素。i、 e.在选择器前添加一个

此
：

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

这将使您对插件所做的操作范围限制在您调用插件的特定视图中，这一点很重要。
您的分析是正确的，您的代码将无法工作，除非您的视图附加到Dom。您现在有多个选项：

通过选项将事件处理移动到视图中。然后，我还建议将事件处理程序附加到视图中
在创建过程中通过将视图附加到dom。阅读本文，尤其是“将视图与其他DOM元素解耦”一节
按照shioyama的建议，这是解决问题的第三种选择
这三种方法都可以解决你的问题。但是这三个都是最佳实践，所以您可能希望应用这三个