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

Backbone :: Using jQuery Plugins on Views

本文关键字：jQuery 插件 视图 Backbone      更新时间：2023-09-26

我很难找到一种干净的方法。让我们举一个例子，从示例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函数中，它看起来会很难看。

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

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

例如，大多数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函数，并让显示视图的代码检查它，如果它存在，则调用它。

例如，有一个"Layout"插件，我已经用过几次了。这个插件需要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

当然，在这个附加组件中，除了这个之外还有很多可用的东西。

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

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

相关文章：