0

我正在使用带有使用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();

好吗？有什么推荐吗？

4

2 回答 2

1

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

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

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

这将您对插件所做的范围限制在您从中调用插件的特定视图中，这很重要。

于 2012-08-22T06:45:17.303 回答
0

您的分析是正确的，除非您的视图附加到 Dom，否则您的代码将无法工作。您现在确实有多种选择：

  1. 通过事件选项将事件处理移动到视图中。然后，我还建议将事件处理程序附加到您的视图中。
  2. 在创建期间通过el 选项将视图附加到 dom 。阅读这篇文章，尤其是“将视图与其他 DOM 元素分离”部分
  3. 遵循 shioyama 的建议，是解决问题的第三个选项。

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

于 2012-08-22T06:50:51.670 回答