骨干::在视图上使用jQuery插件

Question

我在想办法做到这一点时遇到了麻烦。 让我们以带主干的示例待办应用程序中的代码片段为例：

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

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

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

Answer 1

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

例如，大多数jQueryUI控件和KendoUI控件允许您在将HTML附加到DOM之前直接从视图的render调用plugin方法。 您只需在视图的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

当然，此附加组件中还有很多可用的功能。

Answer 2

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

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