聚合物数据绑定跨Chrome dev / canary中不起作用的元素

时间:2014-05-12 03:13:23

标签: polymer

我很高兴在Polymer开发应用程序。一切进展顺利,但是一些相当基本的东西不能在Chrome Dev和Chrome Canary中工作,这是预期的吗?

这是我看到[codepen to try it out yourself]的缩减:

<script src="http://www.polymer-project.org/platform.js"></script></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

<my-app></my-app>

<polymer-element name='my-app'>
  <template>
    <my-processor input='{{input}}' output='{{output}}'>
    <input value='{{input}}'> <br>
    Input: {{input}} <br>
    Processed: {{output}} 
  </template>
  <script>
    Polymer('my-app', { 'input': 'hello world', });
  </script>
</polymer-element>

<polymer-element name='my-processor' attributes='input output'>
  <script>
    Polymer('my-processor', {
      inputChanged: function() {
        this.output = this.input + ' (processed)';
      }
    });
  </script>
</polymer-element>

在Chrome Dev和Canary中,处理后的输出永远不会显示。我使用调试器看到inputChanged在my-processor元素上触发,但my-app永远不会获得更新的输出值。

在Chrome 34,Safari和Firefox中,一切都按预期工作,处理后的输出按预期显示。

1 个答案:

答案 0 :(得分:2)

根据控制台中的警告,my-processor定义出现在使用它的my-app之前非常重要。首先需要注册my-processor才能正确选择绑定。

http://jsbin.com/xovegoga/3/edit