簡體   English   中英

在淘汰賽中更干凈的數據綁定?

[英]Cleaner data-bind within Knockout?

我是使用Knockout的新手,正在做一個非常基本的實現,以可觀察的方式更改顏色。 有沒有一種更干凈的方法來編寫以下代碼?

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

我在頁面上的多個位置都有此功能,它們都為fullHexCode()函數使用了不同的參數。 看起來很亂。 任何幫助將是巨大的,謝謝!

邏輯似乎依賴於另一個可觀察的對象,因此您可以使用計算的可觀察對象-在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> 

您可以通過在viewmodel中定義方法來對HTML代碼進行重復數據刪除。 命名計算甚至會更好,因為它們自然會被記住 ,如果在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,而是最后計算的參數的實際值。 所以:

  • || b返回a,如果不是“ falsy”,則返回b
  • a && b如果不是“ fassy”,則返回b,否則返回a

最后一個習慣用法在KO綁定中很有用,因為與Angular相反,KO綁定是正則JS表達式。 如果在點序列中出現一些null / undefined(如a,如果a未定義),則它們將失敗。

因此,只需編寫data-bind="text: object && object.a || 'None'" ,而不是像data-bind="text: object != null ? (object.a != undefined ? object.a : 'None') : 'None'"之類的第三級運算符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"因為name未定義而失敗,則"data-bind="text: name || 'anonymous'" "data-bind="text: name || 'anonymous'"仍然會失敗,但是"data-bind='text: $data.name || 'anonymous'" "data-bind='text: $data.name || 'anonymous'"會正常工作。根據約定,我寫$data.attribute而不是attribute來傳達關於處理可選屬性的信息。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM