在淘汰赛中为动态生成的复选框分配增量值答案

【问题标题】：Assign incremental values to dynamically generated checkboxes in knockout在淘汰赛中为动态生成的复选框分配增量值
【发布时间】：2015-10-01 15:33:48
【问题描述】：

我想为动态生成的复选框分配唯一的增量值，从 0 开始并以 1 递增（即，复选框值应为 0、1、2、3 等）。我有以下代码 sn-p 这是大图的抽象：

<!DOCTYPE html>
<html>
<head>
    <meta charset="ISO-8859-1">
    <title></title>
    <script src="knockout-3.3.0.js"></script>
</head>
<body>
<table>
    <tbody data-bind="foreach:arr">
        <tr>
            <td><input type="checkbox" data-bind="checked : $root.ch, attr : {value : $root.ci}"></td>
        </tr>
    </tbody>
</table>
<button data-bind="click:add">Click</button>
<button data-bind="click:func">Checked</button>
<script type="text/javascript">
    var viewModel = {
        ci : ko.observable("0"),
        ch : ko.observableArray([]) ,
        arr : ko.observableArray([]),
        add : function(){
            alert(viewModel.ci());
            viewModel.arr.push("something");
            var temp = Number(viewModel.ci());
            temp++;
            viewModel.ci(ko.toJSON(temp));
        },
        func : function(){
            for(var i = 0; i < viewModel.ch().length; i++)
            {
                alert(viewModel.ch()[i]);
            }
        }
    };
    ko.applyBindings(viewModel);
</script>
</body>
</html>

最初，用户界面将包含一个“单击”按钮和一个“已选中”按钮。一旦用户单击“单击”，就会生成一个新的复选框，并根据上述逻辑为其分配值。当用户点击'Checked'时，所有复选框的值都会被一一提醒。现在，这里有一个问题：单击选中时，它会很好地显示所选复选框的值，但是当您从浏览器中的复选框上选择“检查元素”时，所有复选框都会获得相同的值，该值等于创建的复选框。如何解决此问题，使复选框具有增量值？

【问题讨论】：

你为什么要跳过箍将ci存储为字符串？
为什么要使用ko.toJSON 将简单的数字转换为字符串？

标签： javascript html checkbox knockout.js

【解决方案1】：

这些值都是一样的，因为这就是你告诉 KO 要做的事情，在这里：

<input type="checkbox" data-bind="checked : $root.ch, attr : {value : $root.ci}">
<!-- -------------------------------------------------^^^^^^^^^^^^^^^^^^^^^^^^^   -->

如果您希望值不同，则需要有一些对于所有复选框都不相同的东西。

如果您真的想要0、1、2 等等，那么您已经有了foreach 给您的东西：$index。另请注意，您可以使用value 绑定而不是attr: { value: ... }

<input type="checkbox" data-bind="checked : $root.ch, value : $index}">

实例：

var viewModel = {
  ci: ko.observable("0"),
  ch: ko.observableArray([]),
  arr: ko.observableArray([]),
  add: function() {
    alert(viewModel.ci());
    viewModel.arr.push("something");
    var temp = Number(viewModel.ci());
    temp++;
    viewModel.ci(ko.toJSON(temp));
  },
  func: function() {
    for (var i = 0; i < viewModel.ch().length; i++) {
      alert(viewModel.ch()[i]);
    }
  }
};
ko.applyBindings(viewModel);

<table>
  <tbody data-bind="foreach:arr">
    <tr>
      <td>
        <input type="checkbox" data-bind="checked : $root.ch, value: $index">
      </td>
    </tr>
  </tbody>
</table>
<button data-bind="click:add">Click</button>
<button data-bind="click:func">Checked</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

【讨论】：