Шаблонирование с данными, которые имеют много вложенных слоев - PullRequest
Новая
       12

Шаблонирование с данными, которые имеют много вложенных слоев

1 голос
/ 04 марта 2012

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

1 Ответ

1 голос
/ 04 марта 2012

Прежде всего вы можете использовать то, что у вас сейчас есть, с небольшой модификацией (для того, чтобы сделать комментарии, вам нужен известный ключ). Если вы можете изменить данные, которые вы хотите передать движку, вы можете сделать что-то вроде этого: 

<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 из данных шаблона:

Посмотрите на этот пример от Майкл Миор для подробностей.

Работа со многими вложенными слоями

Когда данные содержат много вложенных слоев, рассмотрите возможность использования партиалов для разделения шаблонов. Например, вы можете иметь один шаблон для автора, один для тегов, а другой для комментариев и вкладывать их. 

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

Документ Усы содержит дополнительную информацию об использовании партиалов.

...