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フィールドになります。どのように私は、この列のラベルのみにこれをロックすることができますか？
3. SkuまたはNameのいずれかを検索して右のproduct() observableが更新されるようにするには、Skuフィールドに応じてNameフィールドを設定します（逆も同様です）。

私のフィドルはここにある：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());