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。在初始绑定（包括第一行）上，绑定处理程序不存在，Knockout会忽略它（有时其他绑定用作optionsValue和optionsText等选项。

如果您将ko.bindingHandlers.bindAutoComplete的定义移到ko.applyBindings来电之上，那么您的第一行将与其他行相同。

Knockout自定义绑定未应用于第一个对象

1 个答案: