javascript - knockout -jqAutocomplete `options.value is not a function` 错误

Question

我正在尝试使用 https://github.com/rniemeyer/knockout-jqAutocomplete 将 knockout 购物卡转换为 jquery 自动完成.

下拉列表有效，无论在选择值后我得到:Uncaught TypeError: options.value is not a function。

我的绑定(bind)是:

<tbody data-bind="foreach: lines">
  <tr>
    <td>
        <input data-bind="jqAuto: { source: $root.productData, labelProp: 'sku', value: $parent.product }" />
    </td>
    <td>
        <input data-bind="jqAuto: { source: $root.productData, labelProp: 'name', value: $parent.product }"/>
    </td>
    <td class="quantity">
        <input data-bind='visible: product, value: quantity, valueUpdate: "afterkeydown"'/>
    </td>
    <td class="price">
        <span data-bind="visible: product, value: price"> </span>
    </td>
    <td class="subTotal">
        <span data-bind="visible: product, value: subtotal"> </span>
    </td>
    <td>
        <a href="#" data-bind="click: $parent.removeLine">Remove</a>
    </td>
  </tr>
</tbody>

我的 View 模型是:

var QuoteLine = function() {
    var self = this;
    self.product = ko.observable();
    self.price = ko.observable();
    self.quantity = ko.observable(1);
    self.subtotal = ko.computed(function() {
        return self.product() ? self.price() * parseInt("0" + self.quantity(), 10) : 0;
    });
};

var Quote = function() {
    // Stores an array of lines, and from these, can work out the grandTotal
    var self = this;
    self.lines = ko.observableArray([new QuoteLine()]); // Put one line in by default
    self.grandTotal = ko.computed(function() {
        var total = 0;
        $.each(self.lines(), function() { total += this.subtotal() });
        return total;
    });

    self.productBeingEdited = ko.observable();

    self.editProduct = function(line) {
        console.log("self.editProduct " + line.quantity());
        self.productBeingEdited(line);
    };

    self.saveProduct = function(vm) {
        console.log("save");
    };

    self.productData = [
        {
            "man": "avaya",
            "sku" : "323",
            "name" : "1608-I Handset",
            "description": "An Avaya handset for IP Office and Aura systems."
        },
        {
            "man": "avaya",
            "sku": "324",
            "name": "1616-I Handset",
            "description": "An Avaya handset for IP Office and Aura systems."
        },
        {
            "man": "cisco",
            "sku" : "50ab",
            "name": "Cicso SIP handset",
            "description": "A Cisco handset."
        }
    ];

    self.addLine = function () { self.lines.push(new QuoteLine()) };

    self.removeLine = function(line) { self.lines.remove(line) };

    self.save = function () { /* snip */ };
};


ko.applyBindings(new Quote());

请提问:

1. 我想要的是消除错误!
2. 对于 sku 字段，它似乎会搜索名称，而 sku 的名称字段即 name 字段中的 50a 会显示 Cisco。我如何才能将其锁定到该列的标签？
3. 我如何根据 Sku 字段设置 Name 字段(反之亦然)以允许我通过 Sku 或 Name 进行查找并确保更新正确的 product() observable？

我的 fiddle 在这里:http://jsfiddle.net/m429944x/10/

Answer 1

尝试更改值:$parent.product 到 product

http://jsfiddle.net/m429944x/11/

HTML:

<tbody data-bind="foreach: lines">
  <tr>
    <td>
        <input data-bind="jqAuto: { source: $root.productData, labelProp: 'sku', value: product }" />
    </td>
    <td>
        <input data-bind="jqAuto: { source: $root.productData, labelProp: 'name', value: product}"/>
    </td>
    <td class="quantity">
        <input data-bind='visible: product, value: quantity, valueUpdate: "afterkeydown"'/>
    </td>
    <td class="price">
        <span data-bind="visible: product, value: price"> </span>
    </td>
    <td class="subTotal">
        <span data-bind="visible: product, value: subtotal"> </span>
    </td>
    <td>
        <a href="#" data-bind="click: $parent.removeLine">Remove</a>
    </td>
  </tr>
</tbody>

Javascript:

var QuoteLine = function() {
    var self = this;
    self.product = ko.observable();
    self.price = ko.observable();
    self.quantity = ko.observable(1);
    self.subtotal = ko.computed(function() {
        return self.product() ? self.price() * parseInt("0" + self.quantity(), 10) : 0;
    });
};

var Quote = function() {
    // Stores an array of lines, and from these, can work out the grandTotal
    var self = this;
    self.lines = ko.observableArray([new QuoteLine()]); // Put one line in by default
    self.grandTotal = ko.computed(function() {
        var total = 0;
        $.each(self.lines(), function() { total += this.subtotal() });
        return total;
    });

    self.saveProduct = function(vm) {
        console.log("save");
    };

    // Operations
    self.addLine = function () { self.lines.push(new QuoteLine()) };

    self.removeLine = function(line) { self.lines.remove(line) };

    self.save = function () {
        var dataToSave = $.map(self.lines(),
            function(line) {
                return line.product()
                    ? {
                        productName: line.product().name,
                        quantity: line.quantity()
                    }
                    : undefined
            });
        alert("Could now send this to server: " + JSON.stringify(dataToSave));
    };

    self.productData = [
        {
            "man": "avaya",
            "sku" : "323",
            "name" : "1608-I Handset",
            "description": "An Avaya handset for IP Office and Aura systems."
        },
        {
            "man": "avaya",
            "sku": "324",
            "name": "1616-I Handset",
            "description": "An Avaya handset for IP Office and Aura systems."
        },
        {
            "man": "cisco",
            "sku" : "50ab",
            "name": "Cicso SIP handset",
            "description": "A Cisco handset."
        }
    ];
};

ko.applyBindings(new Quote());