Simple Polymer(0.5.4) 数据绑定示例问题

Question

我在使用以下用于数据绑定的小型自包含聚合物示例时遇到问题。

我的理解是，通过让消费者和供应商都具有带数据的属性，并传入表达式 {{stuff}}，这指的是变量 "stuff"，在范围内元素。

当供应商加载并准备就绪时，它应该填充 stuff 变量，导致消费者插入数据。

http://jsbin.com/yawipodayo/1/edit?html,css,js,output

<!doctype html>
<html>
<head>
    <script src="../bower_components/webcomponentsjs/webcomponents.js">
    </script>
    <link rel="import" href="../bower_components/polymer/polymer.html">
</head>
<body>
    <polymer-element name="consumer" attributes="data">
        <template bind="{{data}}">{{}}</template>
    </polymer-element>
    <polymer-element name="supplier" attributes="data">
        <template></template>
        <script>
        Polymer('supplier', {
            ready: function(){
                this.data = "test"
            }
        });
        </script>
    </polymer-element>
    <polymer-element name = "root">
        <template>
            <supplier data="{{stuff}}"></supplier>
            <consumer data="{{stuff}}"></consumer>
        </template>
    </polymer-element>
    <root>
    </root>
</body>
</html>

Answer 1

您的代码中有很多问题。我将对要解决的问题发表评论：

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Polymer</title>
    <script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
</head>
<body>
<!--  noscript tags are mandatory for elements not having script declared -->
                                                <!--  ⇓⇓⇓⇓⇓⇓⇓⇓ -->
<polymer-element name="my-consumer" attributes="data" noscript>
<!-- when you need to output data, output it -->
         <!-- ⇓⇓⇓⇓⇓⇓⇓⇓ -->
    <template>{{data}}</template>
</polymer-element>
<!-- names MUST include hyphens (everywhere) -->
                 <!--  ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓  -->        
<polymer-element name="my-supplier" attributes="data">
    <template></template>
    <script>
      // As of 0.5 you don’t need to specify name in script
      //    ⇓⇓⇓⇓
      Polymer({
        ready: function(){
            this.data = "test"
        }
    });
    </script>
</polymer-element>
<polymer-element name = "my-root" noscript>
    <template>
        <my-supplier data="{{stuff}}"></my-supplier>
        <my-consumer data="{{stuff}}"></my-consumer>
    </template>
</polymer-element>
<my-root>
</my-root>
</body>
</html>

更正后的版本按预期工作：http://jsbin.com/zewimobaro/1/edit

Simple Polymer(0.5.4) 数据绑定示例问题

Simple Polymer(0.5.4) databinding example troubles

web-component

polymer