Szablony Javascript - Głębokie zagnieżdżanie jest możliwe

Question

Buduję aplikację do zadań (dla zabawy) & Po prostu usiadłem myśląc o tym problemie. Postawię tu pytanie w myślach słowami.

Model jest niezwykle prosty, zawiera kolekcję Project. Każdy projekt zawiera TaskList te Lista zgłoszeń jest gniazdowa tj na przykład Zadanie Projekt FrontPage może mieć projekt nagłówka jako kolejny TaskList. Każda lista zadań zawiera Tasks. Jak wygląda typowy szablon javascript dla tego problemu. Nie mogłem przyjść z takim, który działa w tym scenariuszu. Ten problem jest taki sam jak w przypadku zagnieżdżonego menu, jak wyrenderowałbyś go przy użyciu biblioteki szablonów.

<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, czy ktoś ma rozwiązanie dla ASP.NET (Ideas to niech mi je usłyszeć), N głęboki poziom zagnieżdżenia jest rzeczą, nie jestem w stanie przezwyciężyć teraz.

Answer 1

Użytkownik może zdefiniować swój numer TaskList jako częściowy i dołączyć go rekursywnie jako wskazówki do the documentation.

Szablony:

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

Oto jsFiddle zobaczyć to promocyjny- http://jsfiddle.net/maxbeatty/ND7xv/