3

我尝试在更新绑定到淘汰赛 observablearray 的项目时将 JQuery UI 突出显示效果应用于元素。

应用了高亮效果，但使用的高亮颜色始终是元素的当前背景颜色。即使我使用 { color: 'XXXXXXX' } 选项指定突出显示颜色。

任何想法可能会发生什么？

谢谢，史蒂夫。

下面的代码：元素是 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>

// 这是通过 ajax 进行保存然后在完成时突出显示元素的代码。

        $.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 highlightElement(element) {
    $(element).effect("highlight", {}, 1500);
}
4

1 回答 1

2

我会以“淘汰”的方式做到这一点……使用自定义 bindingHandler。你不应该直接在你的 viewModel 中操作 DOM，而应该只接触你的 viewModel 的属性。

采用这种方法，您只需在保存完成时将布尔值设置为 true ......这会触发突出显示效果（jquery/dom 操作巧妙地隐藏在您的视图模型之外），当突出显示效果完成时，处理程序将布尔值设置回为假。漂亮整洁。

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());

小提琴：http: //jsfiddle.net/brettwgreen/pd14q4f5/

于 2015-04-17T16:55:09.030 回答