来自内部循环的 JsViews Checkbox 绑定

Question

我正在尝试使用 JsViews 为内部循环中的复选框获取双向绑定

不确定这是否可能。

<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));

http://jsfiddle.net/22q7z9n9/

我也试图在复选框更改时触发一个事件

提前致谢

Answer 1

您检查过 JsViews 文档吗？您正在调用 render() 方法，而不是 link() 方法，并且使用的是 jsrender.js 而不是 jsviews.js！

所以你需要像Example page那样加载jsviews.js，然后写：$.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}}

对于事件，有几个选项，包括直接绑定到输入更改事件，或监听数据中的可观察更改等 (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 中所述。