JQuery UI highlight effect color parameter ignored in Knockout foreach

Question

Im trying to apply the JQuery UI highlight effect to an element when an item that is bound to a knockout observablearray is updated.

The highlight effect is applied but the highlight color used is always the elements current background color. even if I specify the highlight color using the { color: 'XXXXXXX' } option.

any ideas what might be happening?

Thanks, Steve.

Code below: The element is the span.tag

<div class="row">
    <div class="span12">
        <div class="tagsinput favs span12" style="height: 100%;" data-bind="foreach: favs, visible: favs().length > 0">
            <span class="tag" data-bind="css: $root.selectedFav() == userPrefID() ? 'selected-fav' : '', attr: { id: 'fav_' + userPrefID() }">
                <span data-bind="text: name, click: $root.loadFav.bind($data)"></span>
                <a class="tagsinput-fav-link"><i class="icon-trash" data-bind="click: $root.delFav.bind($data)"></i></a>
                <a class="tagsinput-fav-link-two" data-bind="visible: $root.selectedFav() == userPrefID()"><i class="icon-save" data-bind="    click: $root.saveFav.bind($data)""></i></a>
            </span>
        </div>
    </div>
</div>

// This is the code that does a save via ajax then highlights the element when done.

        $.getJSON('@Url.Action("SaveFav","User")', { id: item.userPrefID(), fav: window.JSON.stringify(fav) }, function (result) {
            var savedFav = ko.utils.arrayFirst(self.favs(), function (aFav) {
                return aFav.userPrefID() == result.userPrefID; // <-- is this the desired fav?
            });
            // Fav found?
            if (savedFav) {
                // Update the fav!
                savedFav.value(result.value);                         
            }
        }).done(function () {
            var elementID = "#fav_" + item.userPrefID();
            highlightElement(elementID);
        });

// Function to highlight the element

function highlightElement(element) {
    $(element).effect("highlight", {}, 1500);
}

Does `highlightElement` do any styling at all or just nothing? Does jQuery selector in the `highlightElement` return you the element to highlight? — Shalom Aleichem, Jun 18 '13 at 05:20
I am running into something similar. JQuery processing gets overridden apparently by KnockoutJS processing. I think that we'd have to find a way to apply JQuery to the result, not the template. — Mark Brittingham, Apr 24 '14 at 12:53

score 2 · Answer 1 · answered Apr 17 '15 at 16:55

I would do this the 'knockout' way... use a custom bindingHandler. You shouldn't be directly manipulating DOM in your viewModel, but only touching properties of your viewModel.

Taking this approach, you simply set a boolean value to true when your save is complete... this triggers the highlight effect (the jquery/dom manipulation neatly hidden away from your viewmodel) and when highlight effect completes, the handler sets the boolean back to false. Nice and tidy.

HTML:

<div id="#fav" data-bind="highlight: done">This is a test div</div>
<br />
<button data-bind="click: save">Simulate Save</button>

Javascript:

ko.bindingHandlers.highlight = {
    update: function(element, valueAccessor) {
        var obs = valueAccessor();
        var val = ko.unwrap(obs);
        if (val) {
            $(element).effect("highlight", {}, 1500, function() {
                obs(false);
            });
        }
    }
};

var vm = function() {
    var self = this;
    self.done = ko.observable(false);
    self.save = function() {
        self.done(true);
    };
}

ko.applyBindings(new vm());

Fiddle: http://jsfiddle.net/brettwgreen/pd14q4f5/

... and crickets. Did you find a solution to your problem? – Brett Green Apr 20 '15 at 19:58 — Brett Green, Apr 20 '15 at 19:58

JQuery UI highlight effect color parameter ignored in Knockout foreach

1 Answers1