Ko.bindinghandlers无法在Chrome中工作

Question

I've created a bindingHandler:

ko.bindingHandlers.highlight = {
        update: function (element, valueAccessor) {
            $(element).fadeTo("fast", 0.03);
            $(element).fadeTo("fast", 1);
            $(element).fadeTo("fast", 0.03);
            $(element).fadeTo("fast", 1);
            $(element).fadeTo("fast", 0.03);
            $(element).fadeTo("fast", 1);
            $(element).fadeTo("fast", 0.03);
            $(element).fadeTo("fast", 1);
        }
};

...and bound it to an observableArray:

<div data-bind="foreach: contactsInfrastructure">
                <div class="contact" data-bind="highlight: Contact">
                    <div class="contactAvailability">
                        <div class="contactAvailabilityColor" data-bind="css: "availabilityCssClass"></div>
                    </div>
                    <div class="contactName" ><span data-bind="text: name"</span></div>
                    <!-- <div class="contactNote ellipseText" data-bind="text: group"></div> -->
                </div>
            </div>

It works fine in Firefox, but in Chrome this error is returned: Uncaught ReferenceError:

Unable to parse bindings.
Bindings value: highlight: Contact
Message: Contact is not defined

At first I thought it was caused by the DOM not being ready, but that is not the case.

Answer 1

When you use contact without any quotes, Knockout searches for an observable with the name Contact . However, there is no such Observable in your ViewModel.

It seems you also did not use this word in your custom handler. If you need to pass this word into your handler as text, you can wrap it inside quotes => 'Contact'

<div class="contact" data-bind="highlight: 'Contact'"> 
OR
<div class="contact" data-bind="highlight: true">

Answer 2

Is Contact supposed to be an element of the contactsInfrastructure array? Because, if so, you should be using <div class="contact" data-bind="highlight: $data"> instead.

Answer 3

在html中绑定时，实体名称必须是关于列名/ entityName的camelcase。