Computed bindings in automatic linking patterns in Polymer 1.0

Question

How to define calculated bindings in automatic binding templates (i.e. declared as <template is='dom-bind'>...</template> )?

Answer 1

Just assign the calculated binding directly to the template element using a script, making sure that the properties involved are initialized after the calculated binding is defined.

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>