KnockoutJS-擴展購物車示例

Question

我目前正在嘗試擴展KnockoutJS購物車示例，以預加載JSON集合中的現有行。

說，我有一個這樣的對象：

var existingRows = [{
        "Category":Classic Cars,
        "Product":2002 Chevy Corvette,
        "Quantity":1,
    }, {
        "Category":Ships,
        "Product":Pont Yacht,
        "Quantity":2,
}];

我正在嘗試修改示例，以便在加載時以兩行填充網格，並且組合框已預先設置為JSON對象中的項目。

我似乎無法使該對象與JSFiddle很好地協同工作，但到目前為止，我已經修改了Cart和CartLine函數，並且ApplyBindings調用如下：

var CartLine = function(category, product) {
    var self = this;
    self.category = ko.observable(category);
    self.product = ko.observable(product);
    // other code
}

var Cart = function(data) {
    var self = this;
    self.lines = ko.observableArray(ko.utils.arrayMap(data, function(row) { return new CartLine(row.Category, row.Product);}))
    // other code
}

ko.applyBindings(new Cart(existingRows));

這樣可以在加載時正確插入兩行，但不會設置下拉列表。 任何幫助將非常感激 ：）

Answer 1

問題是CartLine對象中category和product可觀察值不是簡單的字符串。 它們是實際的對象，例如， category是指該示例中提供的示例數據中與產品相同的特定類別。 但是，您只是將它們設置為字符串。

（另一個問題是，由於字符串周圍缺少引號，因此您的JS對象existRows不是有效的javascript）

為了使該示例與您的existingRows對象一起使用，您可以從示例數據中提取相關的類別和產品：

var Cart = function(data) {
    // Stores an array of lines, and from these, can work out the grandTotal
    var self = this;
    self.lines = ko.observableArray(ko.utils.arrayMap(data, function(row) {
        var rowCategory = ko.utils.arrayFirst(sampleProductCategories, function(category) {
            return category.name == row.Category;
        });
        var rowProduct = ko.utils.arrayFirst(rowCategory.products, function(product) {
            return product.name == row.Product;
        });

        return new CartLine(rowCategory, rowProduct, row.Quantity);
    }));
    // other code
}

更新的小提琴： http : //jsfiddle.net/antishok/adNuR/664/

Answer 2

<h1> Online shopping</h1>
<button id="btnAdd" data-bind='click: addLine'>Add product</button><br /><br />
<table width='100%'>
    <thead>
        <tr>
            <th width='25%'>Product</th>
            <th class='price' width='15%'>Price</th>
            <th class='quantity' width='10%'>Quantity</th>
            <th class='price' width='15%'>Subtotal (in rupees)</th>
            <th width='10%'> </th>
        </tr>
    </thead>
    <tbody data-bind='foreach: items'>
        <tr>
            <td>
                   <select data-bind='options: products, optionsText: "name", optionsCaption: "Select...", value: product'> </select>
            </td>
            <td class='price' data-bind='with: product'>
                <span data-bind='text: (price)'> </span>
            </td>
            <td class='quantity'>
                <input data-bind='visible:product, value: quantity, valueUpdate: "afterkeydown"' />
            </td>
            <td class='price'>
                <span data-bind='visible: product, text: subtotal()' > </span>
            </td>
            <td>
                <a href='#' data-bind='click: $parent.removeLine'>Remove</a>
            </td>
        </tr>
    </tbody>
</table>
<h2>
    Total value: <span data-bind='text: grandTotal()'></span> rupees
</h2>


$(document).ready(function () {
    $("#btnAdd").button();
    ko.applyBindings(new OnlineShopping());


});


function formatCurrency(value) {
    return "$" + value.toFixed(2);
}
var Item = function () {
    var self = this;
    self.product = ko.observable();
    self.quantity = ko.observable(1);
    self.subtotal = ko.computed(function () {
        var result = self.product() ? self.product().price * parseInt("0"+self.quantity(), 10) : 0;
        return result;
    });

};
var OnlineShopping = function () {
    var self = this;

    // List of items
    self.items = ko.observableArray([new Item()]);

    // Compute total prize. 
    self.grandTotal = ko.computed(function () {
        var total = 0;
        $.each(self.items(), function () { total += this.subtotal() })
        return total;
    });

    // Add item
    self.addLine = function () {
        self.items.push(new Item())
    };

    // Remove item
    self.removeLine = function () {
        self.items.remove(this)
    };
};

// Item collection
var products = [{ name: "IPhone", price: "45000" }, { name: "Galaxy Y", price: "7448" }, { name: "IPad", price: "25000" }, { name: "Laptop", price: "35000" }, { name: "Calci", price: "750"}];