Javascript模板 - 深嵌套是否有可能

Question

我正在構建一個任務應用程序（爲了好玩）&我只是坐下來思考這個問題。我會在這裏用言語將這個問題放在我的腦海裏。

模型非常簡單，它包含集合Project。每個項目都包含一個TaskList這些任務列表是嵌套即例如任務設計的FrontPage可以設計頭作爲另一個TaskList。每個TaskList包含Tasks。典型的javascript模板將如何看起來像這個問題。我無法找到適用於此場景的人。此問題與N級嵌套Menu相同，您將如何使用模板庫進行渲染。

<div> 
    {{#Projects}} 
    <div> 
     <b>{{ProjectName}}</b> 
    </div> 
    <ul> 
     {{#TaskList}} 
     <li>{{TaskListName}} {{CreatedBy}} The Problem Comes here - How do i Render a #TaskList 
      here </li> 
     {{/TaskList}} 
    </ul> 
    {{/Projects}} 
</div> 

順便說一句，如果任何人有asp.net溶液（思路這讓我聽到他們），N級深度嵌套時，我不能馬上克服的東西。

Answer 1

您可以將您的TaskList定義爲部分，並遞歸地將其包含爲the documentation提示。

模板：

<script type="text/template" id="projects"> 
    {{#Projects}} 
    <div> 
     Project: <b>{{ProjectName}}</b> 
    </div> 
    {{>taskList}} 
    {{/Projects}} 
</script> 

<script type="text/template" id="task-list"> 
    {{#TaskList}} 
    <ul> 
     <li> 
      {{TaskListName}} <em>{{CreatedBy}}</em> 
      {{>taskList}} 
     </li> 
    </ul> 
    {{/TaskList}} 
</script> 

的JavaScript：

var data = { 
    Projects: [ 
     { 
     ProjectName: "Project 1", 
     TaskList: [{ 
      TaskListName: "Name 1", 
      CreatedBy: "Person 1"}, 
     { 
      TaskListName: "Name 2", 
      CreatedBy: "Person 2", 
      TaskList: [{ 
       TaskListName: "Sub Name", 
       CreatedBy: "Same Person"}, 
      { 
       TaskListName: "Sub Name 2", 
       CreatedBy: "Person 1"}, 
      { 
       TaskListName: "Sub Name 3", 
       CreatedBy: "Person 3-2", 
       TaskList: [{ 
        TaskListName: "Sub Sub Name", 
        CreatedBy: "Person 3-3"}]}]}]}, 
    { 
     ProjectName: "Project 2", 
     TaskList: [{ 
      TaskListName: "Name 3", 
      CreatedBy: "Person 3"}, 
     { 
      TaskListName: "Name 4", 
      CreatedBy: "Person 4"}]}] 
}, 
    template = $('#projects').html(), 
    partials = { 
     taskList: $('#task-list').html() 
    }, 
    html = Mustache.render(template, data, partials); 

document.write(html); 

這裏的的jsfiddle看到它在行動 - http://jsfiddle.net/maxbeatty/ND7xv/