jquery - knockout : How to delete multiple table row using check on knockoutJS?

Question

嗨，我正在尝试使用 KnockoutJs 在表上进行多行删除。我不知道为什么当我尝试在 table 上使用我的代码时它不起作用。我已经在 ul 上尝试过了，效果很好。

下面是我的代码。需要帮助，提前致谢:(

HTML:

<table class="pure-table" id="tbl_ordered_products">
        <thead>
            <tr>
                <th><input type="checkbox" id="chkAllProducts" /></th>
                <th>Product Code</th>
                <th>Product Name</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Discount Rate</th>
                <th>Stock Balance</th>
                <th>Total Discount</th>
                <th>Orig. Price</th>
                <th>Total</th> 
            </tr>
        </thead>
        <tbody data-bind="foreach: orderedProducts">
            <tr>
                <td><input type="checkbox" id="chkAllProducts" data-bind="value: $data, checked: $parent.selectedOrderedProducts"/></td>
                <td data-bind="text: product_code"></td>
                <td data-bind="text: name"></td>
                <td data-bind="text: price"></td> 
                <td><input data-bind="value: quantity" /></td>
                <td><input data-bind="value: discount" /></td>
                <td data-bind="text: balance"></td>
                <td data-bind="text: total_discount"></td>
                <td data-bind="text: original_price"></td>
                <td data-bind="text: total_price"></td>
            </tr>    
        </tbody>
    </table>

<input type="button" value="Remove Selected" data-bind="click: deleteSelectedProducts" />

我的JS:

function Product(id, product_number, name, price, quantity, discount, balance) {
var self = this;
self.id = ko.observable(id);
self.product_code = ko.observable(product_number);
self.name = ko.observable(name);
self.price = ko.observable(price.toFixed(2));
self.quantity = ko.observable(quantity);
self.discount = ko.observable(discount);
self.balance = ko.observable(balance);
}
function OrdersViewModel() {
var self = this;

self.customerCode = ko.observable();
self.full_name = ko.observable();
self.complete_address = ko.observable();
self.birthday = ko.observable();
self.email = ko.observable();
self.contact = ko.observable();

self.orderedProducts = ko.observableArray();
self.selectedOrderedProducts = ko.observableArray();

self.deleteSelectedProducts = function () {
    alert(self.selectedOrderedProducts.length);
    self.orderedProducts.removeAll(self.selectedOrderedProducts());
    self.selectedOrderedProducts.removeAll();
}

Answer 1

看起来您对 Knockout 在这里的工作原理感到困惑。

比较一下:

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

和

function Product(id, name) {
    var self = this;
    self.htmlId = "product_" + id;
    self.id = ko.observable(id);
    self.name = ko.observable(name);
    self.isSelected = ko.observable(false);
}

function OrdersViewModel(products) {
    var self = this,
        productObjects = ko.utils.arrayMap(products, function (product) {
            return new Product(product.id, product.name);
        });

    self.orderedProducts = ko.observableArray(productObjects);

    self.selectedOrderedProducts = ko.computed(function () {
        return ko.utils.arrayFilter(self.orderedProducts(), function (product) {
            return product.isSelected();
        });
    });
    self.toggleAllProducts = function (vm, e) {
        var checkboxState = e.target.checked;
        ko.utils.arrayForEach(self.orderedProducts(), function (product) {
            product.isSelected(checkboxState);  
        });
        return true;
    };
    self.deleteSelectedProducts = function () {
        self.orderedProducts.removeAll(self.selectedOrderedProducts());
    };
}

• 您的方法中的产品没有 isSelected observable，但这是拥有有效 View 模型的关键。
• 另一方面，您不需要第二组选定的产品。 “选定产品”是您的产品的子集，可以可靠地实时计算。这意味着:使用计算的可观察量。 ko.utils.arrayFilter() 在这里非常有帮助。
• 您的复选框不得具有值绑定(bind)。他们从上下文中“知道”自己在哪里，给他们一个值(value)绑定(bind)会破坏事情。 (无论如何，您都将直接从 View 模型中为后续 Ajax 请求组装数据 - 而不是从您的 View 中。复选框值无关紧要。)
• 您缺少“切换全部”功能，所以我做了一个。
• 表面上的改变，但对用户体验至关重要:如果有复选框，则必须有连接的标签。
• 比较 http://jsfiddle.net/SBzYj/