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來傳達有關處理可選屬性的信息。