Шаблоны Javascript - возможно ли глубокое вложение - PullRequest
Новая
       14

Шаблоны Javascript - возможно ли глубокое вложение

5 голосов
/ 20 января 2012

Я создаю приложение для задач (для удовольствия) и просто сел думать об этой проблеме.Здесь я задам вопрос словами:

Модель чрезвычайно проста, она содержит коллекцию Project.Каждый проект содержит TaskList, эти TaskList nestable , например, например, Task Design FrontPage может иметь Design Header в качестве другого TaskList.Каждый TaskList содержит Tasks.Как будет выглядеть типичный шаблон JavaScript для этой проблемы.Я не мог прийти с тем, который работает по этому сценарию.Эта проблема такая же, как у N level вложенного меню, как бы вы отображали его, используя библиотеку шаблонов. 

<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 уровень глубокого вложения - это то, что я сейчас не могу преодолеть.

1 Ответ

7 голосов
/ 22 января 2012

Вы можете определить свой TaskList как частичный и включить его рекурсивно как документация подсказки.

Шаблоны: 

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

...