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調用，那麼你的第一行將工作相同的其他行。