polymer - Polymer 1.0 中自动绑定(bind)模板中的计算绑定(bind)

Question

如何在自动绑定(bind)模板(即声明为 <template is='dom-bind'>...</template> 的模板)中定义计算绑定(bind)？

Answer 1

只需通过脚本将计算绑定(bind)直接分配给模板元素，确保在定义计算绑定(bind)之后初始化所涉及的属性。

例子:

<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>