在Backbone中查看包裝或子視圖 - 最佳做法或建議

Question

不止一個特定答案我試圖在決定如何構建視圖代碼時獲得有關最佳實踐的建議。在我目前的項目中，我將模型映射到視圖的清晰/乾淨的映射，但所有這些都在具有全局導航元素的漂亮標準容器中呈現。對於這個問題的緣故，畫面這種方式：

• 部首
  • 凸片
• 卡
  • 卡1
  • 卡2
  • 卡3

您單擊標題選項卡，並在卡上的幻燈片。卡本身有一個返回按鈕，其滑動它揭示先前顯示卡。卡的實際內容由另一個可能映射到模型的視圖生成。我想這與iOS或Android中常見的界面模式沒有多大區別。

不管怎麼說，我想有一個名爲「一卡通」與導航的卡模板的視圖類，以及其他任何在每一個那張卡片。然後我想以某種方式將卡的內容傳遞給它。

我可以創建一個Card類，然後擴展它來創建子類（即：子視圖）？所以，說我有一個名爲的usermodel模型和視圖叫做用戶視圖是需要照顧的形式對這種模式，我想要做的事，如：

var Card = Backbone.View.extend(); 
var UserView = Card.extend(); 

然後渲染有結果時，說：

<!-- code from Card --> 
<div class="card"> 
    <nav></nav> 

    <!-- code from UserView --> 
    <div class="user"> 
     ... 
    </div> 
    <!-- END code from UserView --> 


</div> 
<!-- code from Card --> 

我意識到一個快速的方法來做到這一點將是簡單地從每個視圖中手動抓取卡片模板，我需要包裹等等......但感覺不對。

這有道理嗎？

哦......記住那我希望這具有的優點是，部分是我可以和用戶視圖實例進行交互，並將這些觸發父類中必要的方法。所以...

var uv = new UserView(); 
uv.render() // <- should render the user view with the card wrapped around it. 

當然，我不想手動渲染該卡。

你會如何構造它？

謝謝！

Answer 1

由於您特別詢問了最佳實踐，並且您似乎已經開始進入骨幹網，因此我們首先要介紹一些基礎知識。

骨幹的視圖是用模板引擎定義的。默認的模板引擎是underscore.js，但更好的模板引擎是mustache.js或更好，但它是更高級別的wrapper handlebar.js（HandleBarJS Website）。這就讓你將你的視圖和子視圖的結構完全像你在下面描述的一樣，放到一個帶有標記的模板中，用邏輯填充，從而使你只能看到一個大的渲染事件。

既然你已經有了一個很好的模板來注入你的模型，你仍然想讓這個渲染事件執行得很好，所以讓我們確保你預編譯你的模板。有一個很好的理由來理解爲什麼有必要閱讀這篇文章（Performance benefit of Precompiling templates）。 Handlebar.js有一個預編譯模板的方法，所以我不會在這裏提供示例。

現在最後一步是建立你的模型。如果你用JSON格式構建它，你可以簡單地用模型「執行」你的模板。

var context = {title: "My New Post", body: "This is my first post!"} 
var html = template(context); 

我已經使用車把來說明，因爲模板創建更容易恕我直言，但真的什麼都可以用這個模型。

希望得到你的正確道路。