Question

我正在尝试完成一个任务，我选择按钮的值然后使用双向数据绑定我打印它们。我的开始代码是：

<table class="table">
    <tr>
        <td><input type="button" value="1" data-bind="click: addNumber"></td>
        <td><input type="button" value="2" data-bind="click: addNumber"</td>
        <td><input type="button" value="3" data-bind="click: addNumber"></td>
        <td><input type="button" value="4" data-bind="click: addNumber"></td>
        <td><input type="button" value="5" data-bind="click: addNumber"></td>
        <td><input type="button" value="6" data-bind="click: addNumber"></td>
        <td><input type="button" value="7" data-bind="click: addNumber"></td>
        <td><input type="button" value="8" data-bind="click: addNumber"></td>
        <td><input type="button" value="9" data-bind="click: addNumber"></td>
        <td><input type="button" value="10" data-bind="click: addNumber"></td>
    </tr>
</table>

我的观点模型是：

function viewModel(){
        var self = this;

        self.column = ko.observableArray();

        self.addNumber = function() {
            self.column.push(...);
            console.log(self.column());
        }  
    }

ko.applyBindings(new viewModel());

我不知道如何编写addNumber函数来完成任务，当我点击按钮时，它的值会被列在列数组中。

Answer 1

click bindin的函数将获取上下文数据作为参数。看起来您无论如何都在渲染数字列表，因此您也应该使用foreach。像这样：

＆＃13;

function viewModel(){
  var self = this;
  
  self.nrs = ko.observableArray([1,2,3,4,5,6,7,8,9,10]);

  self.column = ko.observableArray();

  self.addNumber = function(data) {
    self.column.push(data);
    console.log(self.column());
  }  
}

ko.applyBindings(new viewModel());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

Column: <strong data-bind="text: column"></strong>.

<table class="table">
  <tbody data-bind="foreach: nrs">
    <tr>
      <td><input type="button" data-bind="value: $data, click: $parent.addNumber"></td>
    </tr>
  </tbody>
</table>

＆＃13;

如果您想更接近原始代码，也可以。然后你必须使用匿名函数告诉knockout要传递什么参数，例如：

<td>
  <input type="button" value="1" data-bind="click: function() { addNumber(1); }">
</td>

使用knockout在可观察数组中推送输入按钮的值

1 个答案: