javascript - Knockout 中的数据绑定(bind)更清晰？

Question

我是 Knockout 的新手，正在做一个非常基本的实现，通过可观察的来改变颜色。有没有更简洁的方法来编写以下代码？

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

我的页面上有多个位置，它们都为 fullHexCode() 函数使用不同的参数。看起来极其凌乱。任何帮助都会很棒，谢谢!

Answer 1

看起来逻辑依赖于另一个可观察量，因此您可以使用计算的可观察量 - 在 backgroundColor 计算的可观察量下方的代码片段中，依赖于 ma​​inScreenNavigationSelector 可观察量。

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

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>