Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Computed bindings in auto-binding templates in Polymer 1.0

How can I define computed bindings in auto-binding templates (i.e. those declared as <template is='dom-bind'>...</template>)?

like image 798
es_code Avatar asked Jun 12 '15 18:06

es_code


People also ask

Which bracket is responsible for data binding?

Text surrounded by double curly bracket ( {{ }} ) or double square bracket ( [[ ]] ) delimiters. Identifies the host data being bound.

Which helper element will you use to improve the memory footprint of large and coplex sites?

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.

Which form of data binding allows upward and downward data flow in polymer JS?

Automatic bindings allow upward and downward data flow.


1 Answers

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>
like image 113
Adaline Simonian Avatar answered Oct 05 '22 15:10

Adaline Simonian