JavaScript的模板 - 深度嵌套有可能 [英] Javascript Templates - Deep nesting is it possible

问题描述

我构建任务的应用程序（为了好玩）及我刚坐下思考这个问题。我会把这个问题在我脑海中的话在这里。

I am constructing a task app ( For fun) & i just sat down thinking about this problem. I will put the question on my mind in words here.

模式非常简单，它包含项目的集合。每个项目都包含一个任务列表这些任务列表是的嵌套即例如任务的设计的FrontPage 可以有设计页眉作为另一个任务列表。每个任务列表包含任务。一个典型的JavaScript的模板将如何看起来像这个问题。我不能来与一个工程这一情况。这个问题是因为氮水平嵌套菜单，你会如何使用模板库渲染。

Model is extremely simple, it contains collection of Project. Each Project contains a TaskList these TaskList is nestable i.e for example a Task Design FrontPage can have Design Header as another TaskList. Each TaskList contain Tasks. How will a typical javascript template look like for this problem. I could not come with one that works this scenario. This problem is as same as N level nested Menu, how would you render it using templating library.

<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级深度嵌套就是我现在无法克服的东西。

btw if anyone has asp.net solution (Ideas for this let me hear them), N level deep nesting is the thing i am unable to overcome right now.

推荐答案

您可以定义你的任务列表作为一个部分，包括递归作为的the文档提示。

You could define your TaskList as a partial and include it recursively as the documentation hints.

模板：

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

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/

这篇关于JavaScript的模板 - 深度嵌套有可能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！