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

Question

I'm new to using Knockout and am doing a very basic implementation that changes the color with a observable. Is there a cleaner way to write the following code?

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

I have this in multiple spots on my page and they all use different params for the fullHexCode() function. It looks extremely messy. Any help would be great, thanks!

Answer 1

It looks like the logic depends on another observable so you could use a computed observable -- in the snippet below the backgroundColor computed observable depends on the mainScreenNavigationSelector observable.

That's just a simple example, you'll have to adjust it to your specific situation.

 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

You may deduplicate your HTML code by defining methods in your viewmodel. Named computeds are even better as they are naturally memoized , that is evaluated only once if used repeatedly in your HTML.

You may also factorize heavy expressions as with: or let: bindings in the parent node. For example: <div class='some-container' data-bind="let: { v: mainScreenNavigationSelector() }">... bindings based on v here... </div> .

Notice: let is better than with for this purpose. But it's a new binding which will be available in the next release of KO. You can polyfill it with a custom binding.

When JS expressions can't be avoided in your HTML code, try to make them as slick as possible. For example:

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

In Javascript, logical operator doesn't return true or false but the actual value of the last evaluated arguments. So:

• a || b return a if not "falsy", otherwise b
• a && b return b if a not "falsy", otherwise a

The last idiom is useful in KO bindings because contrary to Angular, KO bindings are regular JS expressions. They fail if some null/undefined occurs in a dot sequence (like ab if a is undefined).

So instead of some tertiary operator hell like data-bind="text: object != null ? (object.a != undefined ? object.a : 'None') : 'None'" , just write data-bind="text: object && object.a || 'None'"

Also [] and {} are not falsy, and it's actually a good thing. It allows to write things like data-bind="foreach: foo.optionalArray || ['default', 'stuff']"

However, Number(0) is false. So beware of something like data-bind="with: object.id && 'saved' || 'new'" which may not work as expected if 0 is a valid object id.

Also this last trick. If data-bind="text: name" fails because name is undefined , then "data-bind="text: name || 'anonymous'" "data-bind="text: name || 'anonymous'" will still fail, but "data-bind='text: $data.name || 'anonymous'" "data-bind='text: $data.name || 'anonymous'" will work as expected. As a convention, I write $data.attribute instead of attribute to convey the info about dealing with a optional attribute.