Knockout中的清洁数据绑定？

Question

我是新来使用淘汰赛和正在做的改变与观察到的颜色非常基本实现。有没有更清晰的方式来编写下面的代码？

<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代码。命名computeds甚至因为它们是自然memoized，如果在你的HTML重复使用只计算一次更好。

您也可以将重要表达式分解为：或让：绑定在父节点中。例如：<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中，逻辑运算符不返回真或假，但最后评估参数的实际值。所以：

• 一个|| b返回一个，如果不是“falsy”，否则b
• 一个& & b返回B如果一个不是“falsy”，否则

最后一个成语是KO绑定，因为违背了角，KO绑定有用是常规的JS表达式。如果在点序列中出现一些空/未定义（如a未​​定义则为a.b），则失败。

因此，而不是像一些data-bind="text: object != null ? (object.a != undefined ? object.a : 'None') : 'None'"三级运营商的地狱，只写data-bind="text: object && object.a || 'None'"

而且[]和{}不是falsy，它实际上是一件好事。它允许写东西像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来传达有关处理可选属性的信息。