javascript - 在knockout.js中编写组合条件以与click一起使用

Question

我不知道如何正确编写条件以允许在 Knockout.js 中调用 click。我设法创建了 4 个按钮，当我单击它们时，将用它们的值填充可观察数组。我想防止在该数组中传递相同的值，并且还想防止传递两个以上的值。我的起始代码是:

<table>

    <tr>
        <td>
            <input type="button" value="1" data-bind="click: hasBeenAdded() || isFull() ? null : function() { addNumber(1); }">
        </td>
        <td>
            <input type="button" value="2" data-bind="click: hasBeenAdded() || isFull() ? null :function() { addNumber(2); }">
        </td>
        <td>
            <input type="button" value="3" data-bind="click: hasBeenAdded() || isFull() ? null : function() { addNumber(3); }">
        </td>
        <td>
            <input type="button" value="4" data-bind="click: hasBeenAdded() || isFull() ? null : function() { addNumber(4); }">
        </td>
    </tr>
</table>
<h3>Available columns created by the user</h3>
Column: <strong data-bind="text: column"></strong>

我的 View 模型是:

function viewModel() {
        var self = this;

        self.hasBeenAdded = ko.observable(false); 
        self.isFull = ko.observable(false);

        self.column = ko.observableArray();

        self.addNumber = function(data) {
            //console.log('Added ', data);

            self.hasBeenAdded = true;
            self.column.push(data);
        }

        if (self.column().length > 3) {
            self.isFull = ko.observable(true);
        }

    }

你能帮我正确编写 hasBeenAdded 和 isFull bool 值来处理点击数据绑定(bind)吗？

Answer 1

我认为您想要一个按钮值数组，而不是显式创建每个值。这样，您就可以使用 foreach，并且 click 绑定(bind)将获取该值作为其数据参数。

hasBeenAdded 应该是一个一开始为空的字典，您检查所单击的项目是否在 addNumber 内。

要正确打印列，您需要使用 foreach 或使用 join 将数组转换为字符串。

function viewModel() {
  var self = this;

  self.hasBeenAdded = ko.observable({});
  self.numbers = [1, 2, 3, 4];
  self.isFull = ko.observable(false);

  self.column = ko.observableArray();

  self.addNumber = function(data) {
    if (!self.hasBeenAdded[data]) {
      self.hasBeenAdded[data] = true;
      self.column.push(data);
    }
  };

  if (self.column().length > 3) {
    self.isFull = ko.observable(true);
  }

}

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table>

  <tr data-bind="foreach:numbers">
    <td>
      <input type="button" data-bind="value: $data, click: $parent.addNumber">
    </td>
  </tr>
</table>
<h3>Available columns created by the user</h3>
Column: <strong data-bind="text: column().join(',')"></strong>