जावास्क्रिप्ट टेम्पलेट्स - गहरी घोंसला यह संभव है

Question

मैं एक कार्य ऐप (मज़ेदार) का निर्माण कर रहा हूं & मैं बस इस समस्या के बारे में सोच रहा था। मैं यहाँ शब्दों में अपने दिमाग पर सवाल डालूंगा।

मॉडल बेहद सरल है, इसमें Project का संग्रह शामिल है। प्रत्येक परियोजना में शामिल है एक TaskList इन कार्यसूची उदाहरण एक टास्क डिजाइन FrontPageडिजाइन हैडर एक और TaskList के रूप में हो सकता है के लिए nestable यानी है। प्रत्येक कार्यसूची में Tasks होता है। इस समस्या के लिए एक सामान्य जावास्क्रिप्ट टेम्पलेट कैसा दिखता है। मैं इस परिदृश्य को काम करने वाले व्यक्ति के साथ नहीं आ सकता था। यह समस्या एन स्तर नेस्टेड मेनू जैसा ही है, आप टेम्पलेटिंग लाइब्रेरी का उपयोग करके इसे कैसे प्रस्तुत करेंगे।

<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 समाधान (विचार यह मुझे उन्हें सुन जाने के लिए) है btw अगर, एन स्तर गहरी नेस्टिंग बात मैं अभी काबू पाने में असमर्थ हूँ है।

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> 

जावास्क्रिप्ट:

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

यहाँ एक्शन http://jsfiddle.net/maxbeatty/ND7xv/