Question

我想为动态生成的复选框分配唯一的增量值，从0开始并递增1，（复选框值应为0,1,2,3等等）。我有以下代码片段，它是大局的摘要：

<!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>

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

Answer 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>

将增量值分配给挖空中动态生成的复选框

1 个答案: