更干净的数据-绑定在淘汰赛中？

Question

我刚开始使用Knockout，并且正在做一个非常基本的实现，用一个可以观察到的颜色来改变颜色。是否有更清晰的方法来编写以下代码？

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

在我的页面上有多个位置，它们都对fullHexCode()函数使用不同的参数。看起来乱七八糟。任何帮助都会很好，谢谢！

Answer 1

看起来逻辑依赖于另一个可观测的，所以您可以使用一个可观测的计算值--在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>

​

Answer 2

您可以通过在视图模型中定义方法来去复制HTML代码。命名计算更好，因为它们是自然回忆录，如果在HTML中重复使用，则只对其进行一次评估。

您还可以分解父节点中的重表达式(如: let: bindings )。例如：<div class='some-container' data-bind="let: { v: mainScreenNavigationSelector() }">... bindings based on v here... </div>。

注意:为了这个目的，let比使用它更好。但这是一个新的绑定，将在下一个版本的KO中提供。您可以用自定义绑定填充它。

当HTML代码中无法避免JS表达式时，尽量使它们尽可能流畅。例如：

<div data-bind="style: {
     background: fullHexCode(mainScreenNavigationSelector()) || 'white'
}"></div>

在Javascript中，逻辑运算符不返回true或false，而是返回上一个评估参数的实际值。所以：

• 如果不是“假”，则返回a，否则返回b。
• A&B返回b如果a不是“假”，否则a

最后一个成语在KO绑定中很有用，因为与角相反，KO绑定是正则JS表达式。如果某些空/未定义发生在点序列中，它们就会失败(如a.b，如果a是未定义的)。

所以，与像data-bind="text: object != null ? (object.a != undefined ? object.a : 'None') : 'None'"这样的三级运算符不同，只需编写data-bind="text: object && object.a || 'None'"

而且，[]和{}也不是假的，这实际上是一件好事。它允许编写像data-bind="foreach: foo.optionalArray || ['default', 'stuff']"这样的东西

然而，Number(0)是错误的。因此，如果0是一个有效的对象id，那么要小心像data-bind="with: object.id && 'saved' || 'new'"这样的东西，它可能不能像预期的那样工作。

还有最后一招。如果data-bind="text: name"因名称未定义而失败，那么"data-bind="text: name || 'anonymous'"仍将失败，但"data-bind='text: $data.name || 'anonymous'"将按预期工作。按照惯例，我编写$data.attribute而不是attribute来传递有关处理可选属性的信息。