How to create a select list using jsRender?

Question

I'm using jsRender and want to create a <select> tag which lists numbers for 1 to 10.

I'm getting the index I want to select from model.

i.e to create a dropdown like this:

<select name="sets">
            <option value="1">1</option>
            <option value="2" selected="selected">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
</select>

Where the model had the number "2" - so it had to be selected.

How can this be achieved using jsRender?

My Model is something like { selected: 2 }

Thanks!

Answer 1

This code should do the what you asked:

// get array of 10 numbers
// you coud use something like var ary = [0,1,2,3,4,5,6,7,8,9], for loop, or wathever you want
var ary = $.map(Array(10), function(element, index) {return index});
var your_data = { selected: 2 };
// call renderer
$("#items").html($( "#one-select" ).render(ary, (function(model) {
    return {
        isSelected: function(number) {
            return number==model.selected ? 'selected="selected"' : ''
        }
    }
})(your_data)
))

where template is

<script id="one-select" type="text/x-jsrender">
  <option value="{{>#data + 1}}" {{:~isSelected(#data + 1)}}>{{>#data + 1}}</option>
</script>

And here is working example on jsfidle: http://jsfiddle.net/gW2vD/

Answer 2

alternatively you can do a little trick, helpful when using HAML in rails for insance:

%script{ id: "template_list_additional_attributes_table_types", type: "text/x-jsrender"}
  %select
    ="{{for items}}"
    %option{value: "{{:value}}", 'data-selected'=> "{{:selected}}"}
      ="{{:display}}"
    ="{{/for}}"

in your js

Wa.ListAddionalAttributes.prototype.select_for_table = function (aa, pos) {
    var self = this;

    var items = _(self.aa_types).map(function (type, index) {
        return {display: type.display, selected: (type.option_value==aa.type ? 'true selected="selected"' : 'false '), value: type.option_value}
    });

    var rendered = $("#template_list_additional_attributes_table_types").render(
        {
            items: items}
    );

    return rendered;
};

Note that in my example the template is on the complete select box.