Polymer 1.0 中自动绑定模板中的计算绑定答案

【问题标题】：Computed bindings in auto-binding templates in Polymer 1.0Polymer 1.0 中自动绑定模板中的计算绑定
【发布时间】：2015-06-12 18:05:53
【问题描述】：

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

【问题讨论】：

标签： polymer polymer-1.0

【解决方案1】：

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

例子：

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

【讨论】：

这可行，除了绑定发生在渲染发生之后。因此，如果我在 var template = document.querySelector('...'); 之后立即初始化 template.text = 'initial text';，则计算的绑定不会立即呈现：我在控制台输出 [dom-bind::_annotatedComputationEffect]: compute method 'describe' not defined 中收到警告。但是，当我开始在输入框中输入时，绑定确实发生了。对此有什么想法吗？
@es_code，我继续将上面的代码复制到本地并运行它以尝试解决问题；不幸的是（或幸运的是？）我在 Chrome 和 Firefox 的控制台中都没有收到任何警告/错误。 Here is the exact code that I tested.您能否提供更多有关您看到警告的环境的详细信息？我还建议更新到 Polymer 和 WebComponents.js polyfill 的最新次要版本，以消除任何版本问题。我很想尝试复制它！
take a look。我在您的 javascript 代码中添加了 setTimeout 延迟来模拟我正在处理的环境。这里的要点是，从声明is="dom-bind" 元素到执行定义describe 的代码可能需要一些时间。在常规聚合物元件中，这不是问题，因为所有必要的结合都会及时发生。（我还添加了template.text = 'initial text'; 以明确计算的绑定最初不是计算的。查找[dom-bind::_ ... method 'describe' not defined 警告。）
@es_code 嗯。我想我明白你现在的意思了。但是，为什么要在设置属性值之后设置计算绑定定义？这类似于在定义函数之前调用它。您能否更深入地描述一下这里的用例？我理解您所描述的延迟，但我的意思是为什么首先会有延迟？如果绑定是在 HTML 文档中的 <template> 定义之后立即设置的，那么应该不会有任何问题，因为它会在加载文档之前执行，也就是 Polymer 标记模板的时候。
好点@Vartan。计算绑定中涉及的所有属性都应在定义计算绑定之后初始化，以避免出现上述注释中描述的情况。我想不出在设置属性值之后需要定义计算绑定的用例。