你好所有可爱的人！
你们中有人知道为什么我的自定义自动完成绑定没有应用于第一项吗？
特别感兴趣：
片段：
<input class="empiri_ingredient" type="text" data-bind="value: $data.ingredient, returnKey: $root.empiriAddLine.bind($data, $index()), bindAutoComplete: $data" />
和：
ko.bindingHandlers.bindAutoComplete = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
{
console.log(element)
$(element).catcomplete({
delay: 0,
source: data//'php/dbFoods.php'
});
}
};
这是一个小提琴：http: //jsfiddle.net/cJSBq/
完整代码：
<div id="wrapper">
<!-- Folders -->
<ul class="empiriHelp" data-bind="foreach: empiriHelp"><li data-bind="text: title"></li></ul>
<ul class="empiricount" data-bind="foreach: $data.empiriLines">
<li data-bind='event: {mouseover: $root.empiriMouseOver, mouseleave: $root.empiriMouseLeave}'>
<input class="empiri_amount" data-bind="value: $data.amount"/>
<select data-bind="options: $root.measurements, value: $data.unit"></select>
<input class="empiri_ingredient" type="text" data-bind="value: $data.ingredient, returnKey: $root.empiriAddLine.bind($data, $index()), bindAutoComplete: $data" />
<div class="empiri_fader">
<div class="empiri_add" data-bind="click: $root.empiriAddLine.bind($data, $index())">+</div>
<div class="empiri_delete" data-bind="click: $root.empiriRemoveLine.bind($data, $index())">-</div>
</div>
</li>
</ul>
<button data-bind="click: empiriCompileDoubles">Save</button>
<br /><br /><br /><br />
<div data-bind="html: ko.observable(ko.toJSON($root).replace(/\],/g, ']<br />'))"></div>
</div>
javascript
var data = [
{ label: "anders", category: "" },
{ label: "andreas", category: "" },
{ label: "antal", category: "" },
{ label: "annhhx10", category: "Products" },
{ label: "annk K12", category: "Products" },
{ label: "annttop C13", category: "Products" },
{ label: "anders andersson", category: "People" },
{ label: "andreas andersson", category: "People" },
{ label: "andreas johnson", category: "People" }
];
$.widget( "custom.catcomplete", $.ui.autocomplete,
{
_renderMenu: function( ul, items )
{
var that = this,
currentCategory = "";
$.each( items, function( index, item )
{
if ( item.category != currentCategory )
{
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
that._renderItemData( ul, item );
});
}
});
$(document).ready(function()
{
var ViewModel = function(){
var empiriData= [];
var self = this;
self.selectedUnit = ko.observable();
self.measurements = ko.observableArray([
ko.observable('Kg'),
ko.observable('g'),
ko.observable('L'),
ko.observable('dl'),
ko.observable('cl'),
ko.observable('tbps'),
ko.observable('tsp'),
ko.observable('cl')
]);
self.empiriHelp = [{title: "amount"}, {title: "unit"}, {title: "ingredient"}];
self.empiriLines = ko.observableArray([]);
self.empiriAddLine = function(index){
self.empiriLines.splice(index+1,0,{ amount: ko.observable(''), unit: ko.observable(''), ingredient: ko.observable('') });
}
self.empiriAddLine(0)
self.empiriRemoveLine = function(index){
if(self.empiriLines().length!=1){
self.empiriLines.splice(index,1);
}
}
self.empiriMouseOver = function(data, event){
$(event.currentTarget).find(".empiri_fader").stop(true, true).fadeIn(200);
}
self.empiriMouseLeave = function(data, event){
$(event.currentTarget).find(".empiri_fader").stop(true, true).fadeOut(200);
}
self.empiriCompileDoubles = function(){
}
}
ko.applyBindings(new ViewModel);
ko.bindingHandlers.bindAutoComplete = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
{
console.log(element)
$(element).catcomplete({
delay: 0,
source: data//'php/dbFoods.php'
});
}
};
});