Polymer 1.0,如何将属性传递给另一个组件

时间:2016-04-25 20:53:34

标签: web polymer components polymer-1.0

我不知道聚合物中的术语是什么,但我想将数据从一个聚合物元素传递到它在其中使用的另一个元素。

    <dom-module id="bw-boat-form">      
      <template>
          <paper-material class="material-container" elevation="1">
            <h2>{{heading}}</h2>
            <form is="iron-form">
                  <bw-image-upload image$="{{ data.image }}" ></bw-image-upload>                  
            </form>
          </paper-material>
       </template>

  <script>
        Polymer({
          is: 'bw-boat-form',
          properties: {
              data: {
                type: Object
              },
              save: {
                type: Boolean
              },
              update: {
                type: Boolean,
                value: false
              }
          }
        });
  </script>
</dom-module>

图片上传元素

 <dom-module is="bw-image-upload">     
  <template>
      <iron-image class="image" preload placeholder="/images/icons/placeholder.jpg" sizing="cover"></iron-image>
      <vaadin-upload
                      target="{{API_URL}}/images/upload"
                      max-files="1"
                      max-file-size="200000"
                      accept="image/*"
                      upload-success="uploadResponseHandler"
                      file-reject="errorHandler"
      >
      </vaadin-upload>
  </template>
  <script>
  Polymer({
            is: 'bw-image-upload',
            ready: function() {
                console.log(image);
            },
            uploadResponseHandler: function() {

            },
            errorHandler: function() {

            }
          })
  </script>
</dom-module>

我想将{{data.image}}的值从第一个元素传递给第二个元素,以便我可以在需要时更改占位符的图像。我怎样才能做到这一点?

1 个答案:

答案 0 :(得分:1)

  1. image中声明<bw-image-upload>属性:
  2. <dom-module is="bw-image-upload">
      ...
      <script>
        Polymer({
          is: 'bw-image-upload',
          properties: {
            image: String
          }
        });
      </script>
    </dom-module>
    
    1. image绑定到iron-image&#39; placeholder财产:
    2. <dom-module is="bw-image-upload">
        <template>
          <iron-image placeholder="[[image]]"></iron-image>
        </template>
        ...
      </dom-module>
      
      1. 从您的容器元素中,使用属性设置<bw-image-upload>&lt; image属性。注意:请勿使用image$=,因为该语法适用于native element attributes,但此处并不适用。
      2. <dom-module id="bw-boat-form">
          <template>
            <bw-image-upload image="{{data.image}}"></bw-image-upload>
          </template>
          ...
        </dom-module>
        

        &#13;
        &#13;
        <head>
          <base href="https://polygit.org/polymer+:master/components/">
          <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
          <link rel="import" href="polymer/polymer.html">
          <link rel="import" href="iron-image/iron-image.html">
          <link rel="import" href="paper-material/paper-material.html">
        </head>
        
        <body>
          <template id="app" is="dom-bind">
            <bw-boat-form heading="Kitty" data={{boatData}}></bw-boat-form>
          </template>
          <script>
            HTMLImports.whenReady(function() {
              console.log('ready');
              var t = document.getElementById('app');
              var boatData = {};
              boatData.image = 'http://placekitten.com/400/200';
              t.boatData = boatData;
            });
          </script>
        
          <dom-module id="bw-boat-form">
            <template>
              <paper-material class="material-container" elevation="1">
                <h2>{{heading}}</h2>
                <form is="iron-form">
                  <bw-image-upload image="{{ data.image }}"></bw-image-upload>
                </form>
              </paper-material>
            </template>
            <script>
              Polymer({
                is: 'bw-boat-form',
                properties: {
                  data: Object
                }
              });
            </script>
          </dom-module>
        
          <dom-module is="bw-image-upload">
            <template>
              <style>
                iron-image {
                  width: 440px;
                  height: 200px;
                }
              </style>
              <iron-image class="image" preload placeholder="[[image]]" sizing="cover"></iron-image>
            </template>
            <script>
              Polymer({
                is: 'bw-image-upload',
                properties: {
                  image: String
                },
                ready: function() {
                  console.log('bw-image-upload image', this.image);
                }
              })
            </script>
          </dom-module>
        
        </body>
        &#13;
        &#13;
        &#13;