javascript - JsViews 复选框从内部循环绑定(bind)

Question

我正在尝试使用 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));

http://jsfiddle.net/22q7z9n9/

我还尝试在复选框更改时触发事件

提前致谢

Answer 1

您检查过 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 中所述.