用Backbone.js插入視圖的正確方法

我有一個簡單的backbone.js應用程序。我想呈現一個視圖到HTML頁面的DOM中，這個視圖是一個模型的細節視圖。我的HTML頁面已經有了我想渲染視圖的DIV元素。如果我嘗試呈現我的看法是這樣的：用Backbone.js插入視圖的正確方法

detailView = new RulesPanelView({model : @model}) 
$("#detail").html(detailView.render().el)

它失敗，我得到[對象HTMLDivElement]插入DOM，不是我提供的HTML。

這是我能得到它的工作的唯一途徑，這似乎是一個黑客：

$("#detail").html('') 
detailView = new RulesPanelView({model : @model}) 
$("#detail").append(detailView.render().el)

有渲染，所以我沒有得到呈現裏面＃多個視圖之前清空DIV的HTML細節這是什麼會發生append。

也不是我用這種方式創建太多視圖，只是看起來更清潔，以取代第一代碼段中的HTML？

呈現此視圖的正確方法是什麼？

來源

2011-02-23 JMWhittaker

第一個代碼段應該像我在控制器中設置的東西那樣工作。 '$（ '＃內容'）。HTML（currentView.render（）。EL）'。 Arthur Debert的解決方案也應該可以工作。你能向我們展示RulesPanelView的代碼嗎？ – 2011-02-24 16:32:00

你需要的是給已經插入DOM節點傳遞給視圖作爲「厄爾尼諾」選項的構造器：

new RulesPanelView({el: $("#detail")});

這樣一來，就不會再呈現。不過，您仍然需要確保視圖的「渲染」方法能夠從更新的模型渲染正確的視圖。

backbone documentation提到這是避免一次呈現太多東西的好方法。

來源

2011-02-23 23:48:14

是的，這是行不通的。但是有一個問題。在RulesPanelView中分配的任何事件都會在每個渲染中重新分配。所以如果渲染兩次，DOM只包含最新的渲染，但點擊事件觸發兩次。這些事件是使用視圖中的事件哈希設置的。 – JMWhittaker 2011-02-24 10:15:15

每個渲染器（）上都不應該重新分配任何事件。假設您只將事件放入視圖或初始化塊中的'events：{}，'屬性中，則只有在初始化對象時纔會綁定事件。您應該知道，Backbone中的事件塊使用JQuery的'.live（）'並且注意'.bind（）' – 2011-02-24 16:36:04

看起來情況並非如此。每次重新呈現都會導致另一個事件被綁定。我預計它會在渲染之前刪除事件。認爲我要去沒有框架骨幹已經導致我無法解決問題和問題，加上幫助非常缺乏。 – JMWhittaker 2011-02-24 17:45:38

我其實在的render方法的視圖。如果您想在模型更改時重新渲染，這不起作用 - 但爲此，我添加了一個refresh方法，該方法在追加之前實際渲染。然後我將刷新綁定到模型更改（如果需要的話）。所以在我看來，我這樣做：

render: function(){ 
    var markup = this.refresh(); 
    $(markup).appendTo('#some-selector'); 
    return this; 
}, 
refresh: function(){ 
    return $(this.el).html($.mustache(this.template, this.model.toJSON())); 
},

不知道這是否是「最好的」，但我認爲它工作得很好。我也已經看到你有一個集合綁定到一個視圖的集合，這個視圖遍歷所有模型並呈現集合視圖的「子視圖」 - 與提供要添加的硬編碼相比，這提供了一個更好的編程方法。

來源

2011-03-18 13:48:56 meirish

這不是Backbone文檔建議的內容（http://documentcloud.github.com/backbone/#View-render），並且您注意到它會導致問題，例如在模型更改時附加兩次，您必須破解。我也很擔心這個引入的包含結構（＃some-selector）的耦合。 – 2011-11-27 14:18:37

用Backbone.js插入視圖的正確方法

回答

相關問題