Можно ли переключить частичное шаблон на основе значения хеша в Усы? - PullRequest
4 голосов
/ 06 февраля 2012

Хорошо, поэтому я пытаюсь получить контроль над Mustache.js для рендеринга представлений в javascript.У меня есть API, который возвращает несколько «событий», которые могут быть разных типов.Я хочу отображать события (очень) по-разному в зависимости от их типа:

data : { 
  events: [ {title: 'hello', type: 'message'}, {title: 'world', type: 'image'} ] }

В идеале я мог бы сделать что-то вроде этого:?) вынудить меня выполнить рефакторинг моих данных в:

data : { 
  events: [ {message: {title: 'hello'}}, {image: {title: 'world'}} ] }

Есть ли лучший способ решить эту проблему без рефакторинга моих данных?Или я должен просто укусить пулю?

1 Ответ

2 голосов
/ 06 февраля 2012

Усы не имеют логики, поэтому вы ничего не можете сделать с чистым шаблоном кода, кроме переключения на Рули .

Ваша альтернатива для усов - объявить помощника и использовать его для выбора шаблона для рендеринга. Это становится немного запутанным, но вы можете избежать перехода от Усов, если это то, что вы не можете изменить:

var base_template = '{{#events}}' +
                        '{{{event_renderer}}}' +
                    '{{/events}}';
var message_template = '<div>message: {{title}}</div>';
var image_template = '<div>image: {{title}}</div>';
var data = { 
  events: [ {title: 'hello', type: 'message'}, {title: 'world', type: 'image'} ],
  event_renderer: function() {
      return Mustache.render('{{> ' + this.type  + '}}', this, {message: message_template, image: image_template});
  }
}

Mustache.render(base_template, data);

Хитрость в том, что вы создаете базовый шаблон, который будет итератором, и передаете event_renderer в качестве помощника. Этот помощник, в свою очередь, снова вызовет Mustache.render, используя партиалы для визуализации каждого типа события, которое вы можете иметь (это нотация {{> частичный}}).

Единственная уродливая часть здесь - это то, что вам нужно добавить этот event_renderer член к вашим данным JSON, но в остальном все должно быть хорошо (в Handlebars вы можете объявить его как помощника, и нет необходимости объединять это с вашими данными).

...