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

我很难找出一个干净的方法来做到这一点。让我们以一个例子来自附带骨干的例子待办事项应用程序的代码片段：Backbone ::在视图中使用jQuery插件

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

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

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

来源

2012-02-19 CamelCamelCamel

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

例如，大多数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：我已经写了昂秀等常用方法和事件数十次的代码，并巩固了它全部变成骨干插件称为Backbone.Marionette，这样我就不必再写了。

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

没有什么比这只是多提供了很多在这个附加的，当然。

来源

2012-02-19 15:59:36

这让我想起了我的旧数学测试。我过去只是抹掉我的回答，然后走出去，因为我最终只能得到9.2345124的结果，而且看起来太奇怪了，所以我就这样走了出来。这里是一样的，我期望一个干净的解决方案，但显然没有。 = /图书馆看起来很不错，但！ – CamelCamelCamel 2012-02-19 16:04:33

旧的'setTimeout（function（）{...}，0）'hack是一种替代方案，当您需要某些东西来等待DOM排序时通常可以使用。 – 2012-02-19 17:10:09

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

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

来源

2012-02-19 15:59:53

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

回答

相关问题