Question

您好我试图用KnockoutJs在表上删除多行。我不知道为什么我的代码在我尝试在桌面上使用时不起作用。我在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。 ko.utils.arrayFilter()在这里非常有帮助。
您的复选框不得包含值绑定。他们从他们所处的背景中“知道”，给他们一个价值约束打破事物。 （无论如何，您将直接从视图模型汇编后续Ajax请求的数据 - 而不是从您的视图中复制。复选框值无关紧要。）
你错过了“全部切换”功能，所以我做了一个。
化妆品更改，但对用户体验至关重要：如果您有复选框，则必须连接标签。
比较http://jsfiddle.net/SBzYj/

Answer 2

当checked为value时，

Knockout object绑定不起作用。在isChecked对象

中使用其他可观察属性Product

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

JSFiddle DEMO

KnockoutJs：如何使用check on knockoutJS删除多个表行？

2 个答案: