Question

我正在使用带有使用backbone.js的rails应用程序的jQuery UI。我想制作一个可拖动的元素？我在哪里可以使用此功能：

$('.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();

好吗？有什么建议？

Answer 1

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

我的解决方案与您的解决方案几乎相同，只是不是将插件应用于整个文档，而是将其仅应用于view元素。即在选择器前添加this：

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

这使您使用插件所做的工作范围仅限于您调用插件的特定视图，这很重要。

Answer 2

您的分析是正确的，除非您的视图附加到Dom，否则您的代码将无效。你现在有多个选择：

通过events选项将事件处理移至视图中。我还建议将事件处理程序附加到您的视图中。
通过the el option在创建期间将视图附加到dom。阅读此post，特别是关于“从其他DOM元素去耦视图”
按照shioyama的建议，是解决问题的第3个选项。

所有这三个都应该解决您的问题。但所有3个都是最佳实践，因此您可能希望应用所有3个。

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

2 个答案: