knockout-jqAutocomplete`options.value不是一个函数`错误

Question

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

下拉式工作，无论选择值后，我得到：Uncaught TypeError: options.value is not a function。

我的绑定是：

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

我的视图模型为：

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的名称字段即字段中的50a可以调出Cisco。我怎样才能把它锁定到仅用于该列的标签？
3. 我将如何设置名称字段取决于Sku字段（反之亦然），允许我通过Sku或名称查找并确保正确的product() observable得到更新？

我的小提琴是在这里：http://jsfiddle.net/m429944x/10/

Answer 1

尝试变化值：$ parent.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());