Knockout自定义绑定不适用于第一个对象

Question

你好，你可爱的人！

你们有没有想过为什么我的自定义自动完成绑定没有被应用到第一个项目？

特别感兴趣：

片段：

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

Answer 1

您绑定不工作在第一线的原因是因为你定义ko.bindingHandlers.bindAutoComplete你叫ko.applyBindings后。在最初的结合（包括第一行），装订处理程序不存在，这是淘汰赛忽略（有时其他绑定使用像optionsValue和optionsText选项。

如果移动的ko.bindingHandlers.bindAutoComplete你定义上面的ko.applyBindings调用，那么你的第一行将工作相同的其他行。