javascript - 在 knockout 中更干净的数据绑定(bind)？

我是使用Knockout的新手，正在做一个非常基本的实现，以可观察的方式更改颜色。有没有更干净的方法来编写以下代码？

<div class="selected" data-bind="style: { background: fullHexCode(mainScreenNavigationSelector()) !== false ? fullHexCode(mainScreenNavigationSelector()) : 'white' }"></div>

我在页面上的多个位置都有此功能，它们均对fullHexCode()函数使用不同的参数。看起来很乱。任何帮助将是巨大的，谢谢！

最佳答案

逻辑似乎依赖于另一个可观察对象，因此您可以使用计算的可观察对象-在backgroundColor下面的代码段中，计算的可观察对象取决于mainScreenNavigationSelector的可观察对象。

这只是一个简单的示例，您必须根据具体情况进行调整。

var MyViewModel = function () {
  this.mainScreenNavigationSelector = ko.observable(false);

  this.backgroundColor = ko.computed(function() {
    return this.mainScreenNavigationSelector() ? 'green' : 'red';
  }, this);

  this.toggleColor = function() {
    this.mainScreenNavigationSelector(!this.mainScreenNavigationSelector());
  }
}

var viewModel = new MyViewModel();
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="selected" data-bind="style: { 'background-color': backgroundColor }">
  TEST
</div>

<button data-bind="click: toggleColor">Toggle Color</button>