在預渲染的HTML上構建Marionette視圖的乾淨方式是什麼？

我不斷遇到這個問題，我總是不知道如何解決它。例如，我從服務器加載頁面。該網頁有實體的列表（CollectionView或CompositeView內的Backbone.Marionette.ItemView個集合。我怎樣才能乾淨地替換骨幹/木偶管理對象預渲染HTML不拆除初始HTML？在預渲染的HTML上構建Marionette視圖的乾淨方式是什麼？

問題是我否則不得不等待頁面完成加載，然後建立數據視圖，創建一個暫停，然後在頁面最終，真正準備好之前閃光

來源

2014-04-22 Michael Cordingley

如果我理解正確，你想綁定現有的HTML視圖？你正在討論的是替換預渲染的html，以及不要拆除最初的html。你能再詳細一點嗎？如果你不介意更新頁面，我只是用你的集合或複合視圖來替換列表容器的內容。 –

無論哪種方式，真的。我只想避免在頁面加載之後構建和渲染視圖伴隨的視覺閃光。從閱讀Marionette源文件看，似乎有些東西只能在渲染上進行設置，所以如果我想在現有的HTML上放置一個Marionette視圖，那麼我就會黑客入侵圖書館的內部。如果我可以在沒有這種可視化閃光的情況下替換HTML，那麼這看起來相當直接。構建HTML服務器端，以便用戶可以看到它，然後將其替換爲JS，以便它實際上執行某些操作。 –

我會這樣做：
- 加載一個帶有id的容器中的預渲染列表：#container
- 在該id上創建一個木偶區域#container
- 顯示 '木偶-美化版' 查看該容器中

見琴：http://jsfiddle.net/Cardiff/D6hXZ/

注意，HTML 5秒與木偶版之後更新：

// Create a region 
var rm = new Marionette.RegionManager(); 
rm.addRegion("container", "#container"); 

// Show the collectionView with a delay, replacing the pre-rendered html 
_.delay(function() { 
    console.log('updating list with marionette views!'); 
    rm.get('container').show(movieCompViewInstance); 
}, 5000);

你不」 t看到任何閃爍，只是文本顏色的變化，以表明木偶版本處於活動狀態。另外，在點擊刪除按鈕之前，它不會做任何事情，加載後，他們會工作。

來源

2014-04-22 16:10:44

好的，所以在準備就緒時只需構建一個新視圖，並立即將其渲染到舊HTML的頂部。看起來沒有任何缺陷。謝謝！ –

是的，在技術上它取代了舊的HTML，而不是放在它的「頂部」。別客氣！ –

在預渲染的HTML上構建Marionette視圖的乾淨方式是什麼？

回答

相關問題