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插件

回答

相關問題