Backbone :: 在视图上使用 jQuery 插件答案

【问题标题】：Backbone :: Using jQuery Plugins on ViewsBackbone :: 在视图上使用 jQuery 插件
【发布时间】：2012-02-19 15:43:04
【问题描述】：

我很难找到一种干净的方法来做到这一点。让我们以主干附带的示例 todo 应用程序中的代码 sn-p 为例：

addOne: function(todo) {
  var view = new TodoView({model: todo});
  $("#todo-list").append(view.render().el);
},

所以 ToDo 视图被渲染，然后被附加到#todo-list。但是让我们假设我们想在 ToDo 视图中添加一个 jQuery 插件。我们应该将$(".todo").plugin() sn-p 放在哪里？如果我们将它放在 ToDo 视图渲染函数中，则 HTML 元素不会设置在页面上，因此插件不会“锁定”到任何 DOM 元素。如果我们把它放在addOne 函数中，它看起来会很丑。

那么，最好的方法是什么？

【问题讨论】：

标签： javascript jquery backbone.js

【解决方案1】：

答案很大程度上取决于您所说的插件。

例如，大多数 jQueryUI 控件和 KendoUI 控件允许您在 HTML 附加到 DOM 之前直接从视图的render 调用插件方法。您只需在视图的el 上调用它。

例如，如果我想在生成的视图上使用 KendoUI 的菜单：


Backbone.View.extend({
  tagName: "ul",

  render: function(){
    var html = "<li>foo</li><li>bar</li>"; 
    this.$el.html(html);
    this.$el.kendoMenu();
  }
});

无论出于何种原因，有些插件要求 HTML 已经成为 DOM 的一部分。在这种情况下，我通常会在我的视图中提供一个onShow 函数，并让显示视图的代码对此进行检查并在它存在时调用它。

例如，有一个我用过几次的“布局”插件。这个插件需要 HTML 成为 DOM 的一部分才能工作：


MyView = Backbone.View.extend({
  render: function(){
    var html = "generate some html here...";
    this.$el.html(html);
  },

  onShow: function(){
    this.$el.layout();
  }
});

// .... some other place where the view is used

var view = new MyView();
view.render();

$("#someElement").html(view.el);

if (view.onShow) {
  view.onShow();
}

FWIW：我已经为 onShow 和其他常用方法和事件编写了数十次代码，并将它们整合到一个名为 Backbone.Marionette 的 Backbone 插件中，这样我就不必再编写它了.

http://github.com/derickbailey/backbone.marionette

当然，这个附加组件中的功能远不止这些。

【讨论】：

这让我想起了我以前的数学测试。我过去常常只是抹掉我的答案然后走出去，因为我最终只能得到 9.2345124，而且这个数字似乎太奇怪了，不真实，所以我就这样走了。这里也是一样，我希望有一个干净的解决方案，但显然没有。 =/ 这个库看起来很棒！
旧的setTimeout(function(){...}, 0) hack 是一种替代方法，通常在您需要一些东西来等待 DOM 被整理出来时工作。

【解决方案2】：

您可以像this.$('todo') 那样使用主干$ 方法来使用上下文范围的jquery 查询，这将允许您在尚未添加到文档DOM 树的当前视图DOM 片段中进行搜索。

根据我在渲染方法或某种辅助函数中添加 jquery 插件绑定的经验，如果有更多自定义绑定将在模板创建后从渲染方法调用。

【讨论】：