The "let" binding
Purpose
The let binding lets you set custom binding context properties that you can then reference in the bindings of all descendant elements.
Example
Here is a basic example of setting values using let that are then available in all descendant elements, regardless of context changes.
<!--ko let: {inventory: {suppliers: suppliers, bins: bins}, calculatedDisplay: someCalculation}-->
<div data-bind="foreach: {data: inventory.suppliers, as: 'supplier'}>
<div data-bind="foreach: {data: inventory.bins, as: 'bin'}">
<span data-bind="text: calculatedDisplay(supplier, bin)>
</div>
</div>
<!--/ko-->
<script type="text/javascript">
ko.applyBindings({
suppliers: [...],
bins: [...],
someCalculation: function (supplier, bin) {
/* return some calculated value based on parameters */
}
});
</script>
Parameters
-
Main parameter
A JavaScript object whose properties will be copied to the binding context for descendant elements.
If the expression you supply unwraps any observable values, the expression will be re-evaluated whenever any of those observables change. Additionally, the bindings for all descendant elements will be re-evaluated as well.
-
Additional parameters
- None
Note 1: Using “let” without a container element
Just like other control flow bindings, you can use let without any container element to host it. See the documentation for if or foreach for more details.
Note 2: Performance considerations when using “let”
If the expression you provide to the let binding unwraps any observables, each descendant binding will include an additional dependency on the let binding. This is true whether or not the binding references any of the custom context properties. If you want to make an observable value available through let, it is generally better to set the observable itself rather than unwrap it and set the value.
Dependencies
None, other than the core Knockout library.
© Steven Sanderson, the Knockout.js team, and other contributors
Licensed under the MIT License.
https://knockoutjs.com/documentation/let-binding.html