CODEWITHSUNDEEP
javascriptknockout.js
mupersan82
mupersan82

Reputation: 567

Ko.bindinghandlers not working in Chrome

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.

Upvotes: 0

Views: 187

Answers (3)

nikhil
nikhil

Reputation: 201

while binding in html the entity names has to be in camelcase with respect to the column name/entityName.

Upvotes: 0

shahram.at.26
shahram.at.26

Reputation: 34

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

Upvotes: 1

Timothy Shields
Timothy Shields

Reputation: 79561

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.

Upvotes: 1

Related Questions