How can I define computed bindings in auto-binding templates (i.e. those declared as <template is='dom-bind'>...</template>
)?
Text surrounded by double curly bracket ( {{ }} ) or double square bracket ( [[ ]] ) delimiters. Identifies the host data being bound.
Conditional templates introduce some overhead, so they shouldn't be used for small UI elements that could be easily shown and hidden using CSS. Instead, use conditional templates to improve loading time or reduce your page's memory footprint.
Automatic bindings allow upward and downward data flow.
Simply assign the computed binding directly to the template element via a script, making sure that the involved properties are initialized after the definition of the computed binding.
Example:
<template is="dom-bind">
<div>
<input value="{{text::input}}">
</div>
<div>[[describe(text)]]</div>
</template>
<script>
(function() {
var template = document.querySelector('template[is="dom-bind"]');
template.describe = function(text) {
if (text) {
return 'You entered "' + text + '", which is ' + text.length + ' characters long.';
} else {
return 'You didn\'t even enter a thing! Shame on you.';
}
};
template.text = '';
})();
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With