使用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');
但这不是我应该遵循的方式，任何关于可能阻止颜色变化的想法？
答案
问题可能是因为MainColor和SecondaryColor本身不可观察.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，如何在更改可观察数组中的值时更改样式属性