渲染子視圖在骨幹中查看

Question

嗨，我很努力去理解我將如何做到以下幾點。

我有一個我渲染的骨幹視圖，然後我想添加另一個視圖到該視圖中的dom元素。

這裏是我的代碼，因爲它代表：

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'views/common/parent', 
    'text!templates/currentAccounts.html', 
    'text!templates/guidesTools.html' 
], function($, _, Backbone, ParentView, mainTemplate, subTemplate){ 

var accountsView = ParentView.extend({ 
    render : function() { 
     this.$el.html(mainTemplate); 
    } 
}); 

return new accountsView; 

}）;

我現在需要將子模板（guidesTolls.html）附加到主模板中的dom元素。什麼是最好的方法來做到這一點？

Answer 1

請儘量吸取http://backbonejs.org/#examples-todos

的例子在這部分有兩種模式和三種觀點

• 型號/系列
  • 藤型號
  • TodoList的收藏
• 瀏覽次數
  • 待辦事項查看
  • TodoList的視圖
  • 應用數據視圖

的應用數據視圖呈現基於所述TodoList的視圖，這使得每個ToDo對象的待辦事項視圖的圖。

您的情況比這更簡單。具體來說，你可以做這樣的事情有子視圖

<div id="main"> 
</div> 
<script type="text/template" id="main-template"> 
    <h3>main view</h3> 
    <ul> 
     <li><%= account.id %></li> 
     <li><%= account.name %></li> 
    <ul> 
    <div id="guide-tools"></div> 
</script> 

JavaScript中的觀點：

var accountsView = ParentView.extend({ 
    el: $("#main") 
    render : function() { 
     var template = _.template($("#main-template").html()); 
     var guideTemplate = "Guide Tool Text"; 
     this.$el.html(template(this.model.toJSON())); 
     this.$("#guide-tools").html(guideTemplate); // will insert the guide page to the #main div 
    } 
}) 

注：我不知道如何從HTML文件中的文本，特別是如果你正在使用服務器端腳本。