Jquery KnockoutJs：如何使用checkonknockoutjs删除多个表行？

嗨，我想用KnockoutJs在一个表上删除多行。我不知道为什么我的代码在我试着在桌子上使用时不起作用。我在ul上试过，效果很好

下面是我的代码。需要帮助，请提前感谢：(

HTML:

---

看起来你对淘汰赛在这里的运作方式有些困惑

比较一下：

<table class="pure-table" id="tbl_ordered_products">
    <thead>
        <tr>
            <th>
                <input type="checkbox" id="chkAllProducts" data-bind="click: toggleAllProducts" />
            </th>
            <th><label for="chkAllProducts">Product Name</label></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: orderedProducts">
        <tr>
            <td>
                <input type="checkbox" data-bind="checked: isSelected, attr: {id: htmlId}" />
            </td>
            <td><label data-bind="text: name, attr: {for: htmlId}"></label></td>
        </tr>
    </tbody>
</table>
<input type="button" value="Remove Selected" data-bind="click: deleteSelectedProducts" />

• 在您的方法中，产品上没有可观察到的

  isSelected

  ，但这是拥有工作视图模型的关键
• 另一方面，您不需要第二个选定产品数组。“选定产品”是产品的子集，可以可靠地动态计算。这意味着：使用计算的可观测值。

  ko.utils.arrayFilter（）

  在这里非常有用
• 您的复选框不能有值绑定。它们从上下文中“知道”它们所在的位置，给它们一个值绑定会破坏一切。（您将直接从视图模型（而不是视图）为后续Ajax请求组装数据。复选框值与此无关。）
• 你缺少一个“全部切换”功能，所以我做了一个
• 外观上的改变，但对用户体验至关重要：如果你有复选框，你必须有连接的标签
• 比较

---

看起来你对击倒在这里的工作原理有些困惑

比较一下：

<table class="pure-table" id="tbl_ordered_products">
    <thead>
        <tr>
            <th>
                <input type="checkbox" id="chkAllProducts" data-bind="click: toggleAllProducts" />
            </th>
            <th><label for="chkAllProducts">Product Name</label></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: orderedProducts">
        <tr>
            <td>
                <input type="checkbox" data-bind="checked: isSelected, attr: {id: htmlId}" />
            </td>
            <td><label data-bind="text: name, attr: {for: htmlId}"></label></td>
        </tr>
    </tbody>
</table>
<input type="button" value="Remove Selected" data-bind="click: deleteSelectedProducts" />

• 在您的方法中，产品上没有可观察到的

  isSelected

  ，但这是拥有工作视图模型的关键
• 另一方面，您不需要第二个选定产品数组。“选定产品”是产品的子集，可以可靠地动态计算。这意味着：使用计算的可观测值。

  ko.utils.arrayFilter（）

  在这里非常有用
• 您的复选框不能有值绑定。它们从上下文中“知道”它们所在的位置，给它们一个值绑定会破坏一切。（您将直接从视图模型（而不是视图）为后续Ajax请求组装数据。复选框值与此无关。）
• 你缺少一个“全部切换”功能，所以我做了一个
• 外观上的改变，但对用户体验至关重要：如果你有复选框，你必须有连接的标签
• 比较

---

当

值

是

对象

时，击退

已选中

绑定不起作用。 在

Product

对象中使用附加的pbservable属性

isChecked

function Product(id, product_number, name, price, quantity, discount, balance) {
   var self = this;
   self.isChecked = ko.observable(false);
   self.id = ko.observable(id);
   self.product_code = ko.observable(product_number);
   // ...
}  

删除行

self.deleteSelectedProducts = function () {
    var productToRemove = [];
    ko.utils.arrayForEach(self.orderedProducts(), function(product){
       if (product.isChecked()) 
       {
           productToRemove.push(product)
       }
    })
    self.orderedProducts.removeAll(productToRemove)
}  

---

当

值

是

对象时，已选中的敲除
绑定不起作用。
在
Product
对象中使用附加的pbservable属性
isChecked

function Product(id, product_number, name, price, quantity, discount, balance) {
   var self = this;
   self.isChecked = ko.observable(false);
   self.id = ko.observable(id);
   self.product_code = ko.observable(product_number);
   // ...
}  

删除行

self.deleteSelectedProducts = function () {
    var productToRemove = [];
    ko.utils.arrayForEach(self.orderedProducts(), function(product){
       if (product.isChecked()) 
       {
           productToRemove.push(product)
       }
    })
    self.orderedProducts.removeAll(productToRemove)
}  

+1这就是它的要点。虽然我会在
deleteSelectedProducts（）中使用
arrayFilter
而不是
arrayForEach
方法。这更惯用，可以节省一半的行。+1这是它的要点。虽然我会在
deleteSelectedProducts（）
方法中使用
arrayFilter
而不是
arrayForEach
。这更惯用，可以节省一半的行。