2013-10-09 3 views
2

У меня есть dust.js файл шаблона, к которому я прохожу 2 массива:Dust.js, если значение в массиве

  • 1 набор опций для выбора нескольких ниспадающего
  • 1 массив выбранных опций

Как выбрать параметры в раскрывающемся списке dust.js?

Вот пример:

данные я отправить шаблон

var selectOptions = [1,2,3,4,5,6,7,8,9,10,11,12,13]; 
var selectedValues = [3,7,9]; 

Шаблон

<select multiple> 
    {#selectOptions} 
     <option>{.}</option> 
    {/selectOptions} 
</select> 

Как я могу использовать {selectedValues}, чтобы выбрать те варианты?

Заранее за вашу помощь.

ответ

2

Другим решением, которое сделало бы его более чистым для вашего шаблона dust.js, было бы объединение обоих списков в новый список объектов.

Таким образом, используя предыдущий пример данных:

var selectOptions = [1,2,3,4,5,6,7,8,9,10,11,12,13]; 
var selectedValues = [3,7,9]; 
var options = []; 
for(var i=0;i<selectOptions.length;i++){ 
    var item = selectOptions[i]; 
    // Option object containing selected value + selected info 
    var option = { value : item, selected : selectedValues.indexOf(item) > -1 }; 
    options.push(option); 
} 

Ваш шаблон dust.js будет выглядеть следующим образом:

<select multiple> 
{#options} 
    <option {?selected}selected="true"{/selected}>{value}</option> 
{/options} 
</select> 
+0

Это более или менее то, что я закончил делать, но разве нет пылевого способа сделать это вместо того, чтобы модифицировать мой объект? – denislexic

+1

Изменение вашего объекта делает его более чистым в dust.js, иначе вам нужно сделать, как предложил Саймон, но это также означает, что он повторяется в списке для каждого элемента. Пыли.js - это шаблонный движок, который поддерживает минимальные «трюки» кода внутри шаблона, поэтому в этом случае предпочтение отдается JS-коду. –

5

Добавить в другом цикле, чтобы перейти на выбранные опции

<select multiple> 
    {#selectOptions} 
     <option 
      {#selectedValues val=.} 
       {@eq key="{val}" value="{.}"}selected="true"{/eq} 
      {/selectedValues} 
     >{.}</option> 
    {/selectOptions} 
</select> 

Обратите внимание, что я использую пылевые хелпер от Linkedin, чтобы обеспечить сравнение равенства.

+0

Звучит как хорошее решение, теперь попробуем. Не могу поверить, что это не пришло ко мне раньше: – denislexic

+0

humm ... похоже, не работает. Двойное вложение дает мне такое же значение. т.е. {val} и {.} являются точными. Есть идеи? – denislexic

+0

Неплохо, вам не нужны фигурные скобки в объявлении параметра inline. Я редактировал шаблон. Итак, вместо 'val = {.}' Просто используйте 'val = .' – Simon

0

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

_.extend dust.helpers, 

    contains: (chunk, context, bodies, params) -> 
    if _.contains params.array, params.key 
     chunk = bodies.block(chunk, context) 

    chunk 

я использовал CoffeeScript и Underscore.js, но это легко переводимый на обычный JavaScript.

Использование:

// options = ["foo", "bar"] 
{@contains array=options key="bar"} 
    Bar is an option. 
{/contains} 

Существует также плагин, гораздо более обширный, с той же функциональностью в dustjs-helpers-extra.

Дополнительная информация о методе create global helpers.

Смежные вопросы