将背景颜色样式设置为可观察对象并使用样式绑定

Question

我正在尝试设置一个具有特定背景颜色的可观察对象，在视图中调用它。我创建了我的可观察对象，但是当我将其应用于样式绑定时 - 渲染页面时什么都没有发生。

这里是我的代码：

self.color = ko.observable(data.color || '');

我已经在我的数据中设置了：color: 'background-color: #E91E63'

我的视图：

<div class="info" data-bind="style: color"></div>

当我运行页面时，div仍然是白色的，颜色没有改变 - 不确定我可能出了什么问题。

- 072et

---

始终优先声明一个样式类，并在后面使用 css 绑定。您不应该在视图模型中创建不必要的依赖关系。 - super cool

Answer 1

 self.bg_color = ko.observable(data.color || 'red');

然后在HTML中。

 <div class="info" data-bind="style:{ 'background-color' :  $data.bg_color() }"></div>

- riseres

---

在我的情况下，"style:{ 'background-color' : bg_color }" 很好用。谢谢！ - 072et

Answer 2

样式绑定类似于HTML中的style标签。您需要提供需要更新的属性的属性值。

eg: style:{background:color}

此外，您还可以查看此JSFiddle参考链接。该链接与IT技术有关。

- Rajesh