Как установить выбранное значение в раскрывающемся списке, используя Mustache.js? - PullRequest
Новая
       20

Как установить выбранное значение в раскрывающемся списке, используя Mustache.js?

22 голосов
/ 02 апреля 2011

Возможно ли это сделать с помощью Mustache.js?

var data = {"val":"3"},
    template = '<select>' +
                    '<option value="1">1</option>' +
                    '<option value="2">2</option>' +
                    '<option value="3">3</option>' +
                '</select>';

var html = Mustache.to_html(template, data);

$(html).appendTo('body');

Ответы [ 4 ]

34 голосов
/ 02 апреля 2011

Атрибут val не работает, потому что <select> берет свое значение из <option> s, которые имеют атрибут selected.Я не очень знаком с Усами, но это должно работать: 

// snip...        
var html = Mustache.to_html(template, data);
$(html)
    .find('option[value=3]').attr('selected', true)
    .end().appendTo('body');

Я думаю, что шаблон, который вы используете, не идиоматический Усы - он слишком грубый;вы на самом деле не шаблонизируете ничего.Примерно так может быть больше усов: 

var template = '<select>{{#options}}' +
                   '<option value="{{val}}" {{#sel}}selected{{/sel}}>' + 
                       '{{txt}}' + 
                   '</option>' + 
               '{{/options}}</select>',

    data = {options: [
        {val: 1, txt: 'uno'},
        {val: 2, txt: 'dos'},
        {val: 3, txt: 'tres', sel: true}
    ]};

var html = Mustache.to_html(template, data);

$(html).appendTo('body');

Демонстрация →

12 голосов
/ 18 августа 2013

если вы не хотите впоследствии изменять массив или дерево DOM, вы можете использовать функцию: 

var selval=3; // select 3
var template = '<select>{{#options}}' +
                   '<option value="{{val}}" {{selected}}>{{txt}}</option>' + 
               '{{/options}}</select>';
var data={
    options: [
        {val: 1, txt: 'one'},
        {val: 2, txt: 'two'},
        {val: 3, txt: 'three'}
    ],
    selected: function() {
         if (this.val==selval) return "selected";
         return "";
    }
};


var html = Mustache.to_html(template, data);
2 голосов
/ 06 июля 2014

Я использую этот хак для простоты: 

buildOptions = function(object) {
    for (var i in object) {
        object[i + '=' + object[i]] = true;
    }
    return object;
}

Таким образом, вы можете преобразовать данные такого типа: 

{
    field1: 'abc',
    field2: 'xyz' 
}

С такими усами Шаблон: 

<select name="field1">
    <option {{#field1=abc}}selected{{/field1=abc}}>abc</option>
    <option {{#field1=def}}selected{{/field1=def}}>def</option>
    <option {{#field1=ghi}}selected{{/field1=ghi}}>ghi</option>
</select>
<select name="field2">
    <option {{#field2=uvw}}selected{{/field2=uvw}}>uvw</option>
    <option {{#field2=xyz}}selected{{/field2=xyz}}>xyz</option>
</select>

Как это: 

html = Mustache.to_html(template, buildOptions(data));

Который все еще действительно легко читается! Единственное предостережение в том, что вы не можете иметь «.» в ваших ценностях.

2 голосов
/ 26 июня 2013

Я немного опоздал, я знаю, только для дальнейшего использования: 

<script>

var templates = {
    'dropbox': '{{#options}}{{>option}}{{/options}}',
    'option': '<option value="{{value}}"{{#selected}} selected="selected"{{/selected}}>{{text}}</option>'
};

var data = {
    'options': [
        { 'value': '1', 'text': 'One' },
        { 'value': '2', 'text': 'Two', 'selected': true },
        { 'value': '3', 'text': 'Three' }
    ]
};

$('#number').append(Mustache.render(templates.dropbox, data, templates));

</script>

<select id='number' name='number'>
    <option value="0">Choose a number</option>
</select>
...