Jquery 淘汰自定义绑定未应用于第一个对象

大家好，你们这些可爱的人

你们有人知道为什么我的自定义自动完成绑定没有应用到第一个项目吗

特别感兴趣的是：

片段：

<input class="empiri_ingredient" type="text" data-bind="value: $data.ingredient, returnKey: $root.empiriAddLine.bind($data, $index()), bindAutoComplete: $data" />

这是一把小提琴：

完整代码：

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

var数据=[
{标签：“anders”，类别：}，
{标签：“andreas”，类别：}，
{标签：“antal”，类别：}，
{标签：“annhhx10”，类别：“产品”}，
{标签：“annk K12”，类别：“产品”}，
{标签：“annttop C13”，类别：“产品”}，
{标签：“安德斯·安德森”，类别：“人”}，
{标签：“安德烈亚斯·安德森”，类别：“人”}，
{标签：“安德烈亚斯·约翰逊”，类别：“人”}
];
$.widget（“custom.catcomplete”，$.ui.autocomplete，
{
_renderMenu：功能（ul，项目）
{
var=这个，
currentCategory=“”；
$。每个（项目、功能（索引、项目）
{
如果（item.category！=当前类别）
{
ul.追加（“
”+item.category+“
”）；
currentCategory=item.category；
}
即._renderItemData（ul，项目）；
});
}
});
$（文档）.ready（函数（）
{
var ViewModel=函数（）{
经验值=[]；
var self=这个；
self.selectedUnit=ko.observable（）；
自我测量=可观察的角度([
ko.可观察（'Kg'），
ko.可观察的（'g'），
ko.可观察的（‘L’），
ko.可观察（'dl'），
ko.可观察（‘cl’），
ko.可观察的（“TBP”），
ko.可观测（‘tsp’），
ko.可观察（'cl'）
]);
self.empiriHelp=[{title:“amount”}，{title:“unit”}，{title:“component”}]；
self.empiriLines=ko.observearray（[]）；
self.empiliaddline=函数（索引）{
自我经验拼接（指数+1,0，{数量：可观察（''），单位：可观察（''），成分：可观察（''）；
}
自我经验线（0）
self.empiricremoveline=函数（索引）{
if（self.empiriLines（）.length！=1）{
自我。经验。拼接（索引，1）；
}
}
self.empiriMouseOver=函数（数据、事件）{
$（event.currentTarget）.find（“.empiri_fader”）.stop（true，true）.fadeIn（200）；
}
self.empiriMouseLeave=函数（数据、事件）{
$（event.currentTarget）.find（“.empiri_fader”）.stop（true，true）.fadeOut（200）；
}
self.empiriCompileDoubles=函数（）{
}
}
ko.应用绑定（新ViewModel）；
ko.bindingHandlers.bindAutoComplete={
init:function（元素、valueAccessor、allBindingsAccessor、viewModel、bindingContext）
{
console.log（元素）
$（元素）.catcomplete({
延迟：0，
来源：data/'php/dbFoods.php'
});
}
};
});

您的绑定在第一行不起作用的原因是您在调用

ko.applyBindings

后定义了

ko.bindingHandlers.bindAutoComplete

。在初始绑定（包括第一行）上，绑定处理程序不存在，这被Knockout忽略（有时其他绑定用作选项，如

optionsValue

和

optiontext

）

---

如果将

ko.bindingHandlers.bindAutoComplete

的定义移动到

ko.applyBindings

调用上方，那么第一行的工作方式与其他行相同。

在JSFIDLE示例中，我看到“自动完成”因为输入成分起作用了！！确认！你说得对！我想我已经习惯了标准函数，这些函数对它们在文档中的位置并不感兴趣。我就是这样处理的，但是忘记了绑定应用程序。谢谢！

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'
        });
    }
};
});