使用剔除按可观察的数组按输入按钮的值 [英] Push the values of input button in an observable array using knockout

问题描述

我正在尝试完成一个任务，在该任务中，我选择按钮的值，然后使用两种方式进行数据绑定以打印它们.我的起始代码是:

I am trying to complete a task where I choose the values of buttons and then using two way data binding I print them. My starting code is:

<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函数来执行任务，即当我单击按钮时，其值会被推入列数组中.

I don't know how to write the addNumber function to do the task which is when I click on a button its value gets pushed in the column array.

推荐答案

用于click bindin的函数将获取上下文数据作为参数.看起来您还是在渲染数字列表，因此您可能也应该使用foreach.像这样:

A function for a click bindin will get the contextual data as arguments. It looks like you're rendering a list of numbers anyways, so you should probably use foreach too. Something like this:

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());

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

如果您想更贴近原始代码，也可以.然后，您必须使用匿名函数(例如:

If you want to stick closer to your original code that's possible too. Then you have to tell knockout what argument to pass, using an anonymous function, e.g.:

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

这篇关于使用剔除按可观察的数组按输入按钮的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！