使用Colorpicker更改可观察数组中对象的属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Colorpicker更改可观察数组中对象的属性相关的知识,希望对你有一定的参考价值。

我必须在标题的两种颜色上使用数据绑定(一个用于背景,一个用于文本),但我不想创建两个单独的observable,只是一个具有两个属性的单个对象的数组:MainColor和SecondaryColor已初始化十六进制值。 (每个属性的颜色选择器会改变颜色)

我试过这种方式,但它不起作用:(js文件)

function mainViewModel() {
var self = this;

    self.model = new function () {
        var model = this;
        model.myColor = ko.observable([{
            MainColor: '#0080C0',
            SecondaryColor: '#001111'
        }]);
    }

/* applyBindings is written in another method */

    self.domUtils = new function () {
        var domUtils = this;

        domUtils.initColorPicker = function (selector) {
            $('#' + selector + ' button').colpick({
                colorScheme: 'light',
                layout: 'rgbhex',
                submit: 0,
                color: function () {
                    if (selector == 'MainColor')
                        self.model.myColor()[0].MainColor;
                    else
                        self.model.myColor()[0].SecondaryColor;
                },
                onChange: function (hsb, hex, rgb, el) {
                    if (selector == 'MainColor')
                        self.model.myColor()[0].MainColor = '#' + hex;
                    else
                        self.model.myColor()[0].SecondaryColor = '#' + hex;                   
                 },  

                onShow: function (elem) {
                    var top = parseFloat($(elem).css('top').replace('px', ''));
                    var availableHeight = $(window).height();
                    if (top + $(elem).height() > availableHeight) {
                        $(elem).css('top', (availableHeight - $(elem).height() - 20) + 'px');
                    }
                }
            });
        };

        domUtils.initColorPickers = function () {
            domUtils.initColorPicker('MainColor');
            domUtils.initColorPicker('SecondaryColor');
        };
}

(cshtml文件)

<div class="slideshow" data-bind="style: { 'backgroundColor' : model.myColor().MainColor }">
    <div class="slideshow-header slideshow-elements" data-bind="style: { 'backgroundColor' : model.myColor().MainColor, 'color' : model.MyColor().SecondaryColor }"></div>
    <div class="slideshow-button slideshow-elements" data-bind="style: { backgroundColor : model.myColor().MainColor, color : model.myColor().SecondaryColor }">#Next Class</div>                           
</div>

我已经验证所有这些代码都使用单个可观察变量,例如:

model.MainColor = ko.observable('#0080C0');

但这不是我应该遵循的方式,任何关于可能阻止颜色变化的想法?

答案

问题可能是因为MainColorSecondaryColor本身不可观察.Knockout的'可观察性'不会自动涓滴。 此外,由于您使用的是数组,因此最好使用observableArray而不是简单的observable。 您的声明将变成以下内容:

model.myColor = ko.observableArray([{
            MainColor: ko.observable('#0080C0'),
            SecondaryColor: ko.observable('#001111')
        }]);

注意:鉴于此,必须相应地更改其余代码。

另一答案

颜色选项仅定义初始值。试试这个:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="colpick/css/colpick.css" type="text/css"/>
</head>
<body>


    <div class="slideshow" data-bind="style: { 'backgroundColor' : model.myColor.MainColor }">
        <div class="slideshow-header slideshow-elements" data-bind="style: { 'backgroundColor' : model.myColor.MainColor, 'color' : model.myColor.SecondaryColor }"></div>
        <div class="slideshow-button slideshow-elements" data-bind="style: { backgroundColor : model.myColor.MainColor, color : model.myColor.SecondaryColor }">#Next Class</div>

    </div>

    <button id="MainColorButton" data-bind="value: model.myColor.MainColor">Main Color</button>
    <button id="SecondaryColorButton" data-bind="model.myColor.SecondaryColor">Secondary Color</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
    <script src="colpick/js/colpick.js" type="text/javascript"></script>
    <script>
        function mainViewModel() {
            var self = this;


            self.model = new function () {
                var model = this;
                model.myColor = ko.observable([{
                    MainColor: '#0080C0',
                    SecondaryColor: '#001111'
                }]);
            }

            self.domUtils = new function () {
                var domUtils = this;

                domUtils.initColorPicker = function (selector) {
                    $('#' + selector + 'Button').colpick({
                        colorScheme: 'light',
                        layout: 'rgbhex',
                        submit: 0,
                        /*
                        color: function () {
                            if (selector == 'MainColor')
                                self.model.myColor()[0].MainColor;
                            else
                                self.model.myColor()[0].SecondaryColor;
                        },
                        */
                        onChange: function (hsb, hex, rgb, el) {
                            if (selector == 'MainColor')
                                self.model.myColor()[0].MainColor = '#' + hex;
                            else
                                self.model.myColor()[0].SecondaryColor = '#' + hex; 

                            console.log(self.model.myColor()[0].MainColor);
                            console.log(self.model.myColor()[0].SecondaryColor);

                         },  

                        onShow: function (elem) {
                            var top = parseFloat($(elem).css('top').replace('px', ''));
                            var availableHeight = $(window).height();
                            if (top + $(elem).height() > availableHeight) {
                                $(elem).css('top', (availableHeight - $(elem).height() - 20) + 'px');
                            }
                        }
                    });
                };

                domUtils.initColorPickers = function () {
                    domUtils.initColorPicker('MainColor');
                    domUtils.initColorPicker('SecondaryColor');
                };
            }

            self.domUtils.initColorPickers();
        }

    ko.applyBindings(new mainViewModel());
    </script>
</body>
</html>

以上是关于使用Colorpicker更改可观察数组中对象的属性的主要内容,如果未能解决你的问题,请参考以下文章

如何使剔除可观察数组中的对象属性可观察?

Knockout JS,如何在更改可观察数组中的值时更改样式属性

可观察到的数组更改不会反映在第一次点击 - KnockoutJS

RxJs:根据字段值更改创建可观察对象

可观察数组的可观察对象?

KnockoutJS:模板未在可观察数组更改时更新(仅在添加时,在删除时有效)