Question

我是使用Knockout的新手，我正在做一个非常基本的实现，它使用observable改变颜色。是否有更简洁的方法来编写以下代码？

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

我在页面的多个位置都有这个，并且它们都使用fullHexCode()函数的不同参数。它看起来非常凌乱。任何帮助都会很棒，谢谢！

Answer 1

看起来逻辑依赖于另一个observable，因此您可以使用计算的observable - 在 backgroundColor 下面的片段中，计算的observable取决于 mainScreenNavigationSelector observable。

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

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

您可以通过在viewmodel中定义方法来重复删除HTML代码。命名计算器甚至更好，因为它们自然是 memoized ，如果在HTML中重复使用，则只评估一次。

您也可以将重型表达式分解为，其中：或 let：绑定在父节点中。例如：<div class='some-container' data-bind="let: { v: mainScreenNavigationSelector() }">... bindings based on v here... </div>。

注意：为此目的，让优于。但它是一个新的绑定，可以在KO的下一个版本中使用。您可以使用自定义绑定对其进行填充。

如果在HTML代码中无法避免使用JS表达式，请尽量使其变得光滑。例如：

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

在Javascript中，逻辑运算符不会返回true或false，而是返回最后计算的参数的实际值。所以：

a || b如果不是＆＃34; falsy＆＃34;则返回a，否则b

a＆amp;＆amp; b如果不是＆＃34; falsy＆＃34;则返回b，否则返回

最后一个习惯用法在KO绑定中很有用，因为与Angular相反，KO绑定是常规的JS表达式。如果点序列中出现一些null / undefined，则它们会失败（如果a未定义，则为a.b）。

因此，不要像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)是错误的。因此，请注意data-bind="with: object.id && 'saved' || 'new'"之类的内容，如果0是有效的对象ID，则可能无法正常工作。

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

Knockout内的清洁数据绑定？

2 个答案: