JsViews复选框从内部循环绑定

JsViews Checkbox binding from an inner loop

本文关键字：循环 绑定 内部 复选框 JsViews      更新时间：2023-09-26

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

不确定这是否可能。

<div id="targetSelection"></div>
<script id="targetItem" type="text/x-jsrender">
  <b>{^{:text}}</b>
  <div id="answerswers_{^{: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",
  "answerswers": [{
    "index": 1,
    "text": "Male"
  }, {
    "index": 2,
    "text": "Female"
  }, ]
}, {
  "fieldName": "AGE",
  "text": "Age",
  "answerswers": [{
    "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/

当复选框更改时，我还试图激发一个事件

提前感谢

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

因此，您需要像示例页面中那样加载jsviews.js，然后编写：$.templates("#targetItem").link("#targetSelection", target);

请参阅http://www.jsviews.com/#jsv-快速启动

一旦你已经阅读了基础知识，你可以继续沿着以下路线：

{^{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="answerswers_{^{:fieldName}}" class='collapse'>更改为<div data-link="id{:'answers_ + fieldName" class='collapse'>，如本教程序列中所述。

相关文章：