Усы (или руль), перебирающие два списка

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

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>

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

Есть Идеи?

PS: очевидно, в будущем мы будем запрашивать IP-адреса, а не номера телефонов.

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

2 6
javascript mustache handlebars.js

2 ответа:

Вам нужно перестроить свой 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>

Должно сработать.

6

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

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

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>

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

На первом проходе заполните вещи верхнего уровня, и измените {{цифры}} на {{.}} 

$.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>
На следующем проходе мы просто позвоним усачу.визуализация(template2, содержание.цифры); и это должно дать нам: 
  <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}} и просто сделать $.каждый проходит через содержание.девушки и стек .замените три раза. Или я мог бы попытаться начать с самого низкого уровня содержания и работать над своим путем вверх. - Не знаю.

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

3