knockout-jqAutocomplete`options.value不是一个函数`错误
问题描述:
我正在尝试使用https://github.com/rniemeyer/knockout-jqAutocomplete将淘汰购物卡转换成jquery自动完成。knockout-jqAutocomplete`options.value不是一个函数`错误
下拉式工作,无论选择值后,我得到: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());
问题是请:
- 我想是摆脱错误的!
- 对于sku字段,它似乎可以提取搜索名称,并且sku的名称字段即字段中的
50a
可以调出Cisco。我怎样才能把它锁定到仅用于该列的标签? - 我将如何设置名称字段取决于Sku字段(反之亦然),允许我通过Sku或名称查找并确保正确的
product()
observable得到更新?
我的小提琴是在这里:http://jsfiddle.net/m429944x/10/
答
尝试变化值:$ 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());
谢谢!几乎在那里,如果您输入Sku字段'avaya',它会显示匹配的记录,但实际上只想过滤Sku字段,反之亦然,名称列'50'显示(思科的)结果像仅按名称值进行过滤。任何想法如何实现,请吗? – g18c