if you have an array of items, without properties, how do you access the value inside a for loop? I currently get the right number of options, but I haven't found the correct syntax to get the value of the option.
there's a working jsfiddle at: http://jsfiddle.net/geewhizbang/Y44Gm/4/
var data = {
items: [{
"title": "First Drop Down",
"hist": "Secondary",
"dec": "Priority",
"options": ["Priority", "Secondary"],
"type": "select"
}, {
"title": "Second Drop Down",
"hist": "Competitive Widget",
"dec": "Competitive Widget",
"options": ["Yadda", "Badda", "Bing", "Mobile", "Server", "Client", "Snickerdoodle"],
"type": "select"
}]
};
$.views.converters("dateFormat", function (val) {
if (val == null) return "";
var d = new Date(val);
if (d.getFullYear() == "1900") return "";
return d.getMonth() + "/" + d.getDate() + "/" + d.getFullYear();
});
$template = $.templates("#template");
$("#container").html($template.render(data));
the body of this, including template:
<div id="container">
<script id="template" type="text/x-jsrender">
{{for items}}
<div class="bodyItem">
<div class="colDec">
<p>{{>title}}</p>
{{if type == "select"}}
<select data-link="{{>dec}}">
{^{for options}}
<option value="{{#}}">{#}</option>
{{/for}}
</select>
{{else}}
{{if type == "date"}}
<input value="{{dateFormat:dec}}" class="date" />
{{else}}
<div contentEditable="true">{{>dec}}</div>
{{/if}}
{{/if}}
</div>
<div class="colHist">
<p>{{>title}}</p>
{{if type == "date"}}
<input value="{{dateFormat:dec}}" class="date" />
{{else}}
<div>{{>dec}}</div>
{{/if}}
</div>
</div>
{{/for}}
</script>
If options is an array of strings, you need:
Note also the data-link expression on the select element.
In general, in your jsfiddle, you can use data-linking much more. For example:
(Note the ^)
And to do data-linking you need
rather than just calling render...
There are more changes needed, but here is an update of your jsfiddle which does select binding: http://jsfiddle.net/BorisMoore/Y44Gm/5/