我试图建立使用jsView数组数据值的选项 [英] I'm trying to build up options from an array data value using jsView
问题描述
如果你有一个项目数组，没有属性，你如何访问里面的值一个循环？
我目前得到的选项正确的号码，但我还没有找到正确的语法来获取选项的值。
有一个工作的jsfiddle在： http://jsfiddle.net/geewhizbang/Y44Gm/4/
VAR数据= {
项目：[{
头衔：第一个下拉
历史：二级，
DEC：优先级，
选择：优先级，次要]，
类型：中选择
}，{
头衔：第二个下拉
历史：竞争的Widget
DEC：竞争的Widget
选择：Yadda，巴达，兵，手机，服务器，客户，Snickerdoodle]，
类型：中选择
}]
};
$ .views.converters（日期格式功能（VAL）{
如果（VAL == NULL）回报;
变种D =新的日期（VAL）;
如果（d.getFullYear（）==1900）返回;
返回d.getMonth（）+/+ d.getDate（）+/+ d.getFullYear（）;
}）;
$模板= $ .templates（＃模板）;
$（＃容器）的HTML（$ template.render（数据））。
的本体内，包括模板：
＆LT; DIV ID =容器＆GT;
＆LT;脚本ID =模板类型=文/ X-jsrender＆GT;
{{物品}}
＆LT; DIV CLASS =bodyItem＆GT;
＆LT; DIV CLASS =器ColDec＆GT;
＆LT; P＆GT; {{＆GT;标题}}＆LT; / P＆GT;
{{如果类型==选择}}
＆LT;选择数据链路={{＆GT;十二月}}＆GT;
{^ {查看选项}}
＆LT;期权价值={{＃}}＆GT; {＃}＆LT; /选项＆GT;
{{/对于}}
＆LT; /选择＆GT;
{{其他}}
{{如果类型==日期}}
＆LT;输入值={{日期格式：十二月}}级=日期/＆GT;
{{其他}}
＆LT; DIV CONTENTEDITABLE =真正的＆GT; {{＆GT;十二月}}＆LT; / DIV＆GT;
{{/如果}}
{{/如果}}
＆LT; / DIV＆GT;
＆LT; DIV CLASS =colHist＆GT;
＆LT; P＆GT; {{＆GT;标题}}＆LT; / P＆GT;
{{如果类型==日期}}
＆LT;输入值={{日期格式：十二月}}级=日期/＆GT;
{{其他}}
＆LT; DIV＆GT; {{＆GT;十二月}}＆LT; / DIV＆GT;
{{/如果}}
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
{{/对于}}
＆LT; / SCRIPT＆GT;
如果选项是字符串数组，你需要：
＆LT;选择数据链路=DEC＆GT;
{^ {查看选项}}
＆LT;期权价值={{：＃数据}}＆GT; {{：＃数据}}＆LT; /选项＆GT;
{{/对于}}
＆LT; /选择＆GT;
还要注意选择元素的数据链路前pression。
在一般情况下，在你的jsfiddle，可以使用数据联得多。例如：
＆LT; DIV＆GT; {^ {＆GT;十二月}}＆LT; / DIV＆GT;
（注意^）
和做数据关联，您需要
$ template.link（＃集装箱，数据）;
而不是只调用render ...
有需要更多的变化，但下面是一个选择绑定您的jsfiddle的更新： HTTP： //jsfiddle.net/BorisMoore/Y44Gm/5/
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:
<select data-link="dec">
{^{for options}}
<option value="{{:#data}}">{{:#data}}</option>
{{/for}}
</select>
Note also the data-link expression on the select element.
In general, in your jsfiddle, you can use data-linking much more. For example:
<div>{^{>dec}}</div>
(Note the ^)
And to do data-linking you need
$template.link("#container", data);
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/
这篇关于我试图建立使用jsView数组数据值的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
