0

我正在尝试为一大块数字制作热图绑定。到目前为止，应该作为关联地图一部分的数字应该由上下文指定

它可以工作到一定程度。我仍然需要稍微研究一下 rgb 算法，但有问题的部分是 setHeat 计算函数中的 for 循环。

我想要的是，每当更改“最大”或“最小”时，我希望当前在“元素”数组中的所有元素都更新它们的颜色。

但是当一个元素被添加到“元素”数组中时，我只想设置该元素的颜色，但这需要最大和最小，所以我不知道如何正确分离调用，以便最小和最大更新将调用一个和一个元素更新将调用另一个。

我也愿意接受关于如何改进我的绑定的批评。

<!-- ko foreach:items -->
            <tr>
                <td class="postCell">
                    <div class="ui-post-icon" data-bind="class: $parents[2].setPostIcon(post)"></div>
                    <span data-bind="text:post"></span>
                </td>
                <!-- ko foreach:combinations -->
                <td data-bind="heat:{value:amount,context:'exotics'}"></td>
                <!-- /ko -->
            </tr>
            <!-- /ko -->


ko.bindingHandlers.heat = {
        init: function (element, value, allBindings, viewModel, bindingConext) {
            var item = value();
            var model = bindingConext.$root;

            if (!model["koHeat"])
                model["koHeat"] = {};

            if (!model["koHeat"][item.context])
                model["koHeat"][item.context] = ko.observable(new HeatContext());

            var ctx = model["koHeat"][item.context];

            if (!isNaN(item.value)) {
                if (+item.value > ctx().max()) ctx().max(+item.value);
                if (+item.value < ctx().min()) ctx().min(+item.value);
                ctx().elements.push(element);
            }

            $(element).html(item.value).data('koHeat', item.value);

            //set value

            function HeatContext() {
                var self = this;
                this.max = ko.observable(0);
                this.min = ko.observable(Number.MAX_VALUE);
                this.elements = ko.observableArray([]);

                this.setHeat = ko.computed(function () {

                    var max = self.max(),
                        min = self.min(),
                        elems = self.elements(),
                        mid = (max + min) / 2,
                        range = max - min,
                        r, g, b, x;

                    for (var i = 0; i < elems.length; i++) {
                        var val = $(elems[i]).data('koHeat');
                        x = (val - mid) / range;
                        if (x > 0) {
                            g = Math.abs(Math.round(x* 100));
                            b = 0.0;
                            r = Math.abs(Math.round((1.0 - x) * 100));
                        } else {
                            g = Math.abs(Math.round(x * 100));
                            b = Math.abs(Math.round((1.0 - x) * 100));
                            r = 0.0;
                        }
                        log(r,g,b);

                        $(elems[i]).css('color', "rgb(" + r + "," + g + "," + b + ")");
                    }
                });
            }
        }
    };

编辑 我为这种情况做了一个快速的小提琴

http://jsfiddle.net/rwJfK/3/

4

1 回答 1

1

而不是制作setHeata ，只需通过删除前缀并订阅和更改如下将其computed声明为私有函数：HeatContextthis.minmax

this.min.subscribe(setHeat);
this.max.subscribe(setHeat);

现在，setHeat只会在更新min或max更新时运行 - 而不是在将元素推送到数组时运行。

有很多方法可以改进这种绑定。我会在几天内尝试制作一个改进的版本。我将对这个答案进行编辑。

于 2012-10-11T22:43:45.577 回答