我正在尝试使用 JsViews 为内部循环中的复选框进行双向绑定(bind)
不确定这是否可行。
<div id="targetSelection"></div>
<script id="targetItem" type="text/x-jsrender">
<b>{^{:text}}</b>
<div id="answers_{^{:fieldName}}" class='collapse'>
{^{for answers ~fieldName=fieldName}}
<label>
<input type="checkbox" data-fieldName="{{>~fieldName}}" data-index="{{:index}}" data-link="{:selected}" checked="{^{:selected}}" /> {{:text}} : {^{:selected}}
</label>
<br /> {{/for}}
</div>
<br />
</script>
和 JS 代码:
var target = [{
"fieldName": "GENDER",
"text": "Gender",
"answers": [{
"index": 1,
"text": "Male"
}, {
"index": 2,
"text": "Female"
}, ]
}, {
"fieldName": "AGE",
"text": "Age",
"answers": [{
"index": 1,
"text": "15-19"
}, {
"index": 2,
"text": "20-24"
}, {
"index": 3,
"text": "25-29"
}, {
"index": 4,
"text": "30-34"
}, {
"index": 5,
"text": "35-39"
}, {
"index": 6,
"text": "40-44"
}, {
"index": 7,
"text": "45+"
}, ]
}];
$.each(target, function(questionIndex, question) {
$.each(question.answers, function(answerIndex, answer) {
answer.selected = true;
});
});
$("#targetSelection").html($.templates("#targetItem").render(target));
我还尝试在复选框更改时触发事件
提前致谢
最佳答案
您检查过 JsViews 文档吗?您正在调用render()
方法,而不是 link()
方法,并且使用 jsrender.js 而不是 jsviews.js!
因此您需要加载 jsviews.js,如 Example page 所示,然后写入:$.templates("#targetItem").link("#targetSelection", target);
参见http://www.jsviews.com/#jsv-quickstart
阅读完基础知识后,您可以继续执行以下操作:
{^{for answers}}
<label>
<input type="checkbox" data-link="selected" />
{{:text}} : {^{:selected}}
</label>
<br />
{{/for}}
对于事件,有一些选项,包括直接绑定(bind)到输入更改事件,或监听数据中可观察到的更改等( http://www.jsviews.com/#observe )。请参阅示例...
这是一个工作版本 http://jsfiddle.net/28Lezc9m/4/ .
我也改变了:<div id="answers_{^{:fieldName}}" class='collapse'>
至<div data-link="id{:'answers_ + fieldName" class='collapse'>
- 如 this tutorial sequence 中所述.
关于javascript - JsViews 复选框从内部循环绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36704057/