Усы (или рули) перебирая два списка - PullRequest
Новая
       7

Усы (или рули) перебирая два списка

7 голосов
/ 03 марта 2012

У меня есть два массива: 

var content = {
  "girls": ["Maria", "Angela", "Bianca"],
  "digits": ["21.143.191.2", "123.456.78.90", "971.6.17.18.1"]
};

и шаблон: 

<script id="template" type="text/template">
  <ul>
    <li><a href="{{digits}}">{{girls}}</a></li>
  </ul>
</script>

Я бы хотел, чтобы конечный результат был: 

<ul>
  <li><a href="21.143.191.2">Maria</a></li>
  <li><a href="123.456.78.90">Angela</a></li>
  <li><a href="971.6.17.18.1">Bianca</a></li>
</ul>

IЯ пробовал блокировать усы, такие как {{#girls}} {{.}} {{/girls}} и {{#digits}} {{.}} {{/digits}}, но независимо от того, каким образом я их вкладываю, мне кажется, что я получаю повторы, а не чересстрочные.В будущем мы будем запрашивать IP-адреса, а не номера телефонов.

PPS: Ни один из них не предназначен для использования в качестве настоящих IP-адресов, пожалуйста, не пытайтесь связаться с этими девушками!

Ответы [ 2 ]

7 голосов
/ 03 марта 2012

Вам нужно переставить content, чтобы вы могли перебирать только одну вещь. Если вы объедините эти два массива с чем-то вроде этого: 

var data = { girls: [ ] };
for(var i = 0; i < content.girls.length; ++i)
    data.girls.push({
        name:   content.girls[i],
        number: content.digits[i]
    });

Тогда такой шаблон: 

<script id="template" type="text/template">
  <ul>
    {{#girls}}
      <li><a href="{{number}}">{{name}}</a></li>
    {{/girls}}
  </ul>
</script>

должно работать.

3 голосов
/ 03 марта 2012

С советом "mu is too short".И несколько сумасшедших идей я придумал с интересным подходом к сложным шаблонам.* Это почти работает!

Итак, допустим, у меня есть этот контент (или данные или представление), который я хочу поместить в шаблон: 

var content = {
  title: "Black Book",
  girls: ["blonde", "brunette", "redhead"],
  digits: ['123', '456', '789'],
  calc: function () {
    return 2 + 4;
  }
};

И у меня есть такой шаблон:

<script type="text/template" id="template">
  <h1>{{title}}</h1>
  <h3>{{calc}}</h3>
  <ul>
    <li><a href="{{digits}}">{{hair}}</a></li>
  </ul>
</script>

И конечный результат, который мне нужен, таков: 

  <h1>Black Book</h1>
  <h3>6</h3>
  <ul>
    <li><a href="123">blonde</a></li>
    <li><a href="456">brunette</a></li>
    <li><a href="789">redhead</a></li>
  </ul>

Проблема, с которой мы столкнемся, состоит в том, что у нас есть массивы (или списки), вложенные в наше исходное содержимое, и еслимы пытались создать Mustache.render (html, content), в результате мы получили только один элемент li или целый массив в одном атрибуте href = "".Так грустно ...

Так что он подход, пройти через шаблон несколько раз.В первый раз пропустите и замените элементы верхнего уровня и настройте шаблон для следующего прохода.Во второй раз настройте один из списков и настройте шаблон для третьего прохода и т. Д., Чтобы узнать, сколько у вас слоев контента.Вот новый начальный шаблон: 

<script type="text/template" id="template">
  <h1>{{title}}</h1>
  <h3>{{calc}}</h3>
  <ul>
    {{#hair}}
    {{#digits}}
    <li><a href="{{digits}}">{{hair}}</a></li>
    {{/digits}}
    {{/hair}}
  </ul>
</script>

На первом проходе заполните заполнение верхнего уровня и измените {{digits}} на {{.}} 

$.each(content, function (index, value) {
    template2 = template.replace(/{{title}}/ig, content.title)
                   .replace(/{{calc}}/ig, content.calc)
                   .replace(/{{digits}}/ig, '{{.}}');
});

Сейчасу вас есть это: 

  <h1>Black Book</h1>
  <h3>6</h3>
  <ul>
    {{#hair}}
    {{#digits}}
    <li><a href="{{.}}">{{hair}}</a></li>
    {{/digits}}
    {{/hair}}
  </ul>

На следующем проходе мы просто вызовем Mustache.render (template2, content.digits);и это должно дать нам: 

  <h1>Black Book</h1>
  <h3>6</h3>
  <ul>
    {{#hair}}
    <li><a href="123">{{hair}}</a></li>
    <li><a href="456">{{hair}}</a></li>
    <li><a href="789">{{hair}}</a></li>
    {{/hair}}
  </ul>

И вот где моя логика умирает, хаха.Любая помощь, продумавшая это, потрясет!Я думаю, что мог бы извлечь элементы блока {{hair}} и просто сделать $ .each, пропустить content.girls и сложить .replace три раза.Или я мог бы попытаться начать с самого низкого уровня контента и продолжить свой путь.Я не знаю.

Все это в основном заставляет меня задуматься о том, есть ли какой-то "не логичный" способ размещения такого типа вложений или нескольких проходов в усы, разве рули делают это?

...