Question

它工作了一段时间，我不知道我改变了什么，但它停止将所选值设置到产品中，我不知道为什么。我所做的只是删除了一些我确定不会使用的其他属性。

这是JSON：

[{"ID":"1","product_name":"product A","product_code":"","price":"5000"},{"ID":"2","product_name":"product B","product_code":"","price":"10"}]

这是html

<table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Product</th>
                <th>Product Code</th>
                <th>Qty</th>
                <th>Unit Price</th>
                <th>Discount(%)</th>
                <th>Amount</th>
                <th></th>
            </tr>
        </thead>
        <tbody data-bind='foreach: orders'>
            <tr>
                <td class="field-product_name" >
                    <select class="form-control" data-bind='options: products, optionsText: "product_name", optionsCaption: "Select...", value: product'> </select>
                </td>
                <td class="field-product_code"><span data-bind='text: product.product_name'></span></td>
                <td class='field-qty'>
                    <input class="form-control" data-bind='value: product.qty, valueUpdate: "afterkeydown"' />
                </td>
                <td class='field-price'>
                    <input class="form-control" data-bind='value: product.price, valueUpdate: "afterkeydown"' />
                </td>
                <td class='field-discount'>
                    <input class="form-control" data-bind='value: product.discount, valueUpdate: "afterkeydown"' />
                </td>
                <td class='field-subtotal' data-bind='text: formatCurrency(amount)'></td>
                <td>
                    <a href='#' title='Delete' data-bind='click: $parent.removeOrder'><span class="glyphicon glyphicon-trash"></span></a>
                </td>
            </tr>
        </tbody>
</table>

这里是js代码

var App = App || {};

App.PurchaseLibrary = App.PurchaseLibrary || {}; 

App.PurchaseLibrary.loadVendors = function (callback) {
    $.get( "index.php?r=product/all", function( data ) {
        callback( data );
    });
};

App.PurchaseLibrary.Order = function () {
    var self = this;
    self.product = ko.observable();
    self.amount = ko.pureComputed(function() {
        var amount = 0;
        //if (self.product.ID !== "undefined") {
        if (self.product.ID) {
            self.product.qty = 1;
            amount = parseFloat(self.product.price) * parseInt(self.product.qty) - (parseFloat(self.product.discount / 100 * parseFloat(self.product.price())));
            self.product.subtotal = amount;
        } else {
            self.product.subtotal = 0;
        }
        return amount;
    });
};

App.PurchaseLibrary.OrderCollection = function () {
    var self = this;
    self.orders = ko.observableArray([new App.PurchaseLibrary.Order()]);
    self.grandTotal = ko.pureComputed(function() {
        var total = 0;
        $.each(self.orders(), function() { total += this.product.subtotal })
        return total;
    });
    self.addOrder = function() { self.orders.push(new App.PurchaseLibrary.Order()) };
    self.removeOrder = function(order) { self.orders.remove(order) };
    self.save = function() {

    };
};

App.PurchaseLibrary.loadVendors(function (data) {
    window.products = $.parseJSON(data);
    ko.applyBindings(new App.PurchaseLibrary.OrderCollection());
});;

Answer 1

通过加入optionsValue

来尝试这样的事情

<强> HTML

 <select class="form-control" data-bind='options: products, optionsText: "product_name",optionsValue:"product_code",optionsCaption: "Select...", value: product'> </select>

如您所见，我在select标记中添加了optionsValue:"product_code"。现在值将出现在product可观察量中。之前您曾在产品可观察量中得到Object，其中值＆amp;文字。

Knockout选择框值不绑定

1 个答案: