Is it possible to do this with 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');
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:
// 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:
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');
Demo →
if you do not want to modify the array or DOM tree afterwards you can use a function:
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With