javascript - Backbone::在 View 上使用 jQuery 插件

Question

我无法找到一种干净的方法来做到这一点。让我们以 Backbone 附带的示例待办事项应用程序中的代码片段为例:

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

因此，ToDo View 正在被渲染，然后被附加到#todo-list。但假设我们想要向 ToDo View 添加一个 jQuery 插件。我们应该将 $(".todo").plugin() 代码段放在哪里？如果我们将其放置在 ToDo View 渲染函数中，则页面上不会设置 HTML 元素，因此该插件不会“锁定”任何 DOM 元素。如果我们将其放在 addOne 函数中，它看起来会很难看。

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

Answer 1

答案很大程度上取决于您正在谈论的插件。

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

例如，如果我想在生成的 View 上使用 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 的一部分。在这种情况下，我通常在 View 中提供一个 onShow 函数，并让显示 View 的代码检查该函数并调用它(如果存在)。

例如，有一个我用过几次的“布局”插件。该插件需要 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

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