Question

我正在开发一些CouchDB应用程序，这很有趣。我也在学习如何使用Mustache.js进行模板化。我的问题是，当您的数据有许多嵌套层时，最简单的模板方法是什么。这是一个例子：

var jsondata = {
  post1: {
    title: "First blog post",
    author: "John",
    tags: ["awesome", "interesting", "philosophical"],
    comments: {
      julie: "I love it!",
      mark: "I hate it!"
    }
  },
  post2: {
    title: "Second blog post",
    author: "Jill",
    tags: ["extraordinary", "crazy", "nice"],
    comments: {
      julie: "I love it!",
      mark: "I hate it!"
  }
};

我意识到这取决于数据的独特结构，但有一种通用的方法效果很好吗？以下是我正在考虑的一些内容：

从集合中提取嵌套数据，以便拥有顶级数组的集合，然后使用辅助函数将这些数据编译为模板。
构建模板以镜像数据，然后使用$ .each，模板和正则表达式的一些疯狂组合来一次编译模板。
将编译分解为多个部分，然后多次通过模板，直到完全完成。

我很迷失在这里，会喜欢一些帮助！

PS：我打算将博客文章，评论和标签分成单独的json文档，然后将它们与couchdb视图和列表一起拉出来，所以我对结果数据结构仍然有点不确定。 / p>

Answer 1

首先，您只需稍加修改就可以使用现有的内容（为了呈现您需要拥有已知密钥的注释）。如果您可以更改要传递给引擎的数据，则可以执行以下操作：

<script type="text/javascript">
    $(function () {
        var posts = {blogs:[
            {
                title:"First blog post",
                author:"John",
                tags:["awesome", "interesting", "philosophical"],
                comments:[
                    {name:"juli", comment:"I love it"},
                    {name:"foo", comment:"bar"}
                ]
            },
            {
                title:"Second blog post",
                author:"Jill",
                tags:["extraordinary", "crazy", "nice"],
                comments:[
                    {name:"juli", comment:"I love it"},
                    {name:"foo", comment:"bar"}
                ]
            }
        ]};
        var template = $("#template").html();
        var output = Mustache.render(template, posts);
        console.log(output);
    });
</script>
<script id="template" type="x-template">
    {{#blogs}}
    <div>{{title}}</div>
    <div>{{author}}</div>
    <ul>
       {{#tags}}
       <li>{{.}}</li>
       {{/tags}}
    </ul>
    <ul>
        {{#comments}}
        <li>{{name}}: {{comment}}</li>
        {{/comments}}
    </ul>
    {{/blogs}}
</script>

如果您无法更改输入，我建议您转到Handlebars.js，您可以在其中编写一个从模板数据中提取key-val的辅助函数：

有关详情，请查看this example Michael Mior。

使用许多嵌套图层

当数据包含许多嵌套图层时，请考虑使用partials来分割模板。例如，您可以为一个标签创建一个模板，为标记创建另一个模板并将其嵌套。

//Blog template
{{#blogs}}
  {{title}}
  ...
  //delegate rendering of tags to a partial template
  {{> tags}}
  {{> comments}}
{{/blogs}}

Mustache doc包含有关使用partials的更多信息。

使用具有许多嵌套层的数据进行模板化

1 个答案: