Modelli Javascript - È possibile nidificazione profonda

Question

Sto costruendo un'applicazione per attività (Per divertimento) & mi sono seduto a pensare a questo problema. Metterò la domanda nella mia mente con le parole qui.

Il modello è estremamente semplice, contiene la raccolta di Project. Ogni progetto contiene un TaskList questi TaskList è annidabile cioè per esempio una task design FrontPage può avere design intestazione come un altro TaskList. Ogni TaskList contiene Tasks. Come sarà un tipico modello di javascript per questo problema. Non potrei venire con uno che funzioni questo scenario. Questo problema è uguale a Menu n. nidificato, come lo si renderà utilizzando la libreria di modelli.

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

btw se qualcuno ha una soluzione asp.net (Idee per questo mi permetta di sentire loro), N livello profondo di nidificazione è la cosa che sono in grado di superare questo momento.

Answer 1

È possibile definire lo TaskList come parziale e includerlo ricorsivamente come the documentation suggerimenti.

Modelli:

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

Ecco il jsFiddle per vederlo in azione-http://jsfiddle.net/maxbeatty/ND7xv/