knockout-jqAutocomplete erreur `options.value n'est pas une fonction`

Question

J'essaie de convertir la carte knockout shoping à une saisie semi-automatique jquery en utilisant https://github.com/rniemeyer/knockout-jqAutocomplete.

La liste déroulante fonctionne, lorsque la valeur est sélectionnée, obtenir: Uncaught TypeError: options.value is not a function.

Mes liaisons sont:

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

Et moi-modèle est:

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()); 

Les questions sont s'il vous plaît:

1. Ce que je voudrais est de se débarrasser des erreurs !
2. Pour le champ sku, il semble que les recherches portent sur le nom, et le champ de nom pour sku, c'est-à-dire 50a dans le champ name, fait apparaître Cisco. Comment puis-je verrouiller cela aux étiquettes seulement pour cette colonne?
3. Comment est-ce que je placerais le champ de nom selon le champ de Sku (et vice versa) me permettant de rechercher par Sku ou nom et assurer le product() observable juste est mis à jour?

Mon violon est ici: http://jsfiddle.net/m429944x/10/

Answer 1

valeur Essayez de changement: parent.product de $ au produit

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());