Javascript Şablonları - Derin iç içe mümkün mü

Question

Bir görev uygulaması yapıyorum (Eğlence için) & Sadece bu sorun hakkında düşünmeye oturdum. Aklıma buradaki soruları burada koyacağım.

Model çok basittir, Project koleksiyonunu içerir. Her Projesi TaskList bu TaskList başka TaskList olarak Tasarım Başlığını sahip olabilir örneğin bir görev Tasarım FrontPage için nestable yani olduğu içeriyor. Her TaskList, Tasks içerir. Bu sorun için tipik bir javascript şablonu nasıl görünecek? Bu senaryoyu çalıştıran biriyle gelemedim. Bu sorun, N düzeyindeki iç içe geçmiş Menü ile aynıdır, nasıl şablon kitaplığı kullanarak oluşturursunuz. Herkes (bu bana onları duyayım için Fikirler) asp.net çözümü vardır btw eğer

<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> 

, N seviyesi derin yuvalama ben şu anda üstesinden kuramıyorum şeydir.

Answer 1

TaskList ürününü kısmi olarak tanımlayabilir ve the documentation ipuçlarını yinelemeli olarak ekleyebilirsiniz.

Şablonlar:

<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); 

İşte eyleme http://jsfiddle.net/maxbeatty/ND7xv/