使用敲除將可見數組中的輸入按鈕的值推入

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

bindin的函數將獲取上下文數據作爲參數。看起來你正在渲染一個數字列表，所以你也應該使用foreach。事情是這樣的：

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>

如果你想堅持更接近你的原始代碼，也是有可能的。然後你必須告訴淘汰賽什麼參數通過，使用匿名功能，例如：

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