Is it possible to do this with Mustache.js?
是否可以使用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 个解决方案
#1
34
The val
attribute doesn't work, because a <select>
takes its value from the <option>
s which have the selected
attribute. I'm not very familar with Mustache, but this should work:
val属性不起作用,因为
// snip...
var html = Mustache.to_html(template, data);
$(html)
.find('option[value=3]').attr('selected', true)
.end().appendTo('body');
I think that the template you're using is not idiomatic Mustache — it's too coarse grained; you're not actually templating anything. Something like this might be more Mustache-y:
我认为你使用的模板不是惯用的胡子 - 它太粗糙了;你实际上并没有模仿任何东西。像这样的东西可能是更多的胡子-y:
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');
演示→
#2
9
if you do not want to modify the array or DOM tree afterwards you can use a function:
如果您之后不想修改数组或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);
#3
2
I little bit late, I know, just for future reference:
我知道,我有点迟了,仅供将来参考:
<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>
#4
2
I use this hack to keep it simple:
我使用这个hack来保持简单:
buildOptions = function(object) {
for (var i in object) {
object[i + '=' + object[i]] = true;
}
return object;
}
In this way, you can transform this kind of data:
通过这种方式,您可以转换此类数据:
{
field1: 'abc',
field2: 'xyz'
}
With this kind of Mustache Template:
使用这种Mustache模板:
<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>
Like this:
喜欢这个:
html = Mustache.to_html(template, buildOptions(data));
Which still really easy to read! The only caveat is that you can't have a '.' in your values.
哪个仍然很容易阅读!唯一需要注意的是,你不能拥有'。'在你的价值观中。
#1
34
The val
attribute doesn't work, because a <select>
takes its value from the <option>
s which have the selected
attribute. I'm not very familar with Mustache, but this should work:
val属性不起作用,因为
// snip...
var html = Mustache.to_html(template, data);
$(html)
.find('option[value=3]').attr('selected', true)
.end().appendTo('body');
I think that the template you're using is not idiomatic Mustache — it's too coarse grained; you're not actually templating anything. Something like this might be more Mustache-y:
我认为你使用的模板不是惯用的胡子 - 它太粗糙了;你实际上并没有模仿任何东西。像这样的东西可能是更多的胡子-y:
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');
演示→
#2
9
if you do not want to modify the array or DOM tree afterwards you can use a function:
如果您之后不想修改数组或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);
#3
2
I little bit late, I know, just for future reference:
我知道,我有点迟了,仅供将来参考:
<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>
#4
2
I use this hack to keep it simple:
我使用这个hack来保持简单:
buildOptions = function(object) {
for (var i in object) {
object[i + '=' + object[i]] = true;
}
return object;
}
In this way, you can transform this kind of data:
通过这种方式,您可以转换此类数据:
{
field1: 'abc',
field2: 'xyz'
}
With this kind of Mustache Template:
使用这种Mustache模板:
<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>
Like this:
喜欢这个:
html = Mustache.to_html(template, buildOptions(data));
Which still really easy to read! The only caveat is that you can't have a '.' in your values.
哪个仍然很容易阅读!唯一需要注意的是,你不能拥有'。'在你的价值观中。