将信息从多个复选框发送到数组 Knockout js

Question

我有一个视图模型，其中包含我使用 foreach 在网站上显示的信息。 这就是它的外观。 当该人单击可能其中 2 个的复选框时，可观察到的变为真，并且我有一个按钮，上面写着应用，当单击该按钮时，我想要做的是获取被选中的两行的整个视图模型数组，或者可能检查 1 行并将它们放入一个数组中。所以我可以将它发送到数据库。

所以基本上我这里有 HTML。

<tbody data-bind="foreach: investmentinvoicedatasintable">
  <tr>
      <td class="text-center"><span data-bind="text: $data.invoiced_total"></span></td>
      <td class="text-center"><span data-bind="text: $data.paid_total "></span></td>
      <td class="text-center">
        <a href="#" data-bind="if: $data.status == 10,  click: $root.getRepaymentInvoice"><?php echo lang("invoice_table_pay1"); ?></a>
        <span data-bind="ifnot:  $data.status == 10"><?php echo lang("invoice_table_pay1"); ?></span>  
      </td>
      <td class="text-center"><div  data-bind="if: $data.status == 10" ><input type="checkbox" data-bind="checked: $data.checkedInvoice1"/></div>
          <div  data-bind="ifnot: $data.status == 10" ></div>
      </td>
  </tr>
 </tbody>

申请

这里是 Knockout js 文件。

 /* Vew model for invoices data */
self.invoicedatasintable = ko.observableArray();
        function InvoiceViewModel(root /* root not needed */, invoice) {
            var self = this;
            self.ID = invoice.ID;
            self.type_related_amount = invoice.type_related_amount;
            self.type_related_paid = invoice.type_related_paid;
            self.ORIG_ID = invoice.ORIG_ID;
            self.Fullname = invoice.Fullname;
            self.status_description = invoice.status_description;
            self.type_txt = invoice.type_txt;
            
            self.checkedInvoice1 = ko.observable(0);

            self.getCheckedInvoiceInfo = function(checkedinvoice){
            if(checkedInvoice1){
                return checkedinvoice;
            }else{
                return 0;
            }
        }
        };

这里是按钮功能，需要检查视图模型并获取具有检查值（true）的数组并将它们放入一个整个数组中。

self.getCheckedInvoices = function(){
        self.arr = ko.observableArray();
         $.each( self.getCheckedInvoiceInfo(), function (index, item) {
                if(item.checkedInvoice1 == 0){
                    return false;
                }else{
                    self.arr.push(/*only the array which has checked 1 */ );
                }
                
            });
            console.log(self.arr());
    }

所以问题是我不确定如何调用 invoiceViewModel 来查看已检查的行信息，以及如何仅获取已检查的某些行。 self.invoicedata() 是将所有数组存储在开始显示在表格中的数组。

Answer 1

明白了！你正试图循环错误的一个。 self.invoicedatasintable observable 拥有你所有的数据

视图模型：

self.arr = ko.observableArray();
self.getCheckedInvoices = function() {
  ko.utils.arrayForEach(self.invoicedatasintable(),function(item){ //use ko.utils foreach 
    if (item.checkedInvoice1()) { //it's a Boolean flag
      self.arr.push(item);
    }
  });
    console.log(self.arr());
}

Checkbox 选中的属性确保当checked/unChecked 绑定到它的 observable 被修改。

样本here