Question

我无法找到一个干净的方法来做到这一点。让我们举一个示例来自示例todo应用程序的代码片段，它带有主干：

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调用插件方法。您只需在视图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片段。

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

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

2 个答案: