从 dom-repeat 访问元素的属性

Question

我在元素中使用 dom-repeat 模板，我想在新元素中使用该元素 (<custom-element>) 的属性 typeElement (<media-element>) 来自 dom-repeat:

<dom-module id="custom-element">
  <template>
    <template is="dom-repeat" items="{{array}}" as="file">
      <media-element some-prop="{{typeElement}}" file="{{file}}"></media-element>
    </template>
  </template>

  <script>
    Polymer({
      is: 'custom-element',
      properties: {
        typeElement: Number,
        array: {
          type: Array,
          value: function() { return[]; }
        }
      }
    });
  </script>
</dom-module>

我该怎么做？

Answer 1

因为设置属性如： typeElement: Number 将无法正常工作。您必须像定义 array 属性一样定义它。所以：

typeElement: {
 type: Number,
 value: Number,
}

不知道你想要什么价值。在此之后它应该工作

Answer 2

我不确定 "use the property" 是什么意思，所以我在下面做出假设。

假设您想将<media-element>.someProp设置为<custom-element>.typeElement的值，那么您的数据绑定是正确的。每当 typeElement 的值发生变化时，someProp 将被设置为相同的值。您可以使用 this.someProp 在 <media-element> 的方法中访问该值。示例：

<dom-module id="media-element">
  <template>...</template>
  <script>
    Polymer({
      is: 'media-element',
      properties: {
        someProp: Number
      },
      foo: function() {
        console.log(this.someProp);
      }
    });
  </script>
</dom-module>

假设您还希望对 <media-element>.someProp 的更改更新 <custom-element>.typeElement，那么您需要在 [=17= 的属性声明中设置 notify: true ]:

// media-element
properties: {
  someProp: {
    type: Number,
    notify: true  // <-- only needed for upward notifications (two-way data binding and observers)
  }
}

HTMLImports.whenReady(() => {
  Polymer({
    is: 'custom-element',
    properties: {
      typeElement: {
        type: Number,
        value: 100,
        observer: '_typeElementChanged'
      }
    },
    _typeElementChanged: function(typeElement) {
      console.log('new typeElement', typeElement);
    }
  });
  
  Polymer({
    is: 'media-element',
    properties: {
      someProp: {
        type: Number,
        notify: true
      }
    },
    _logSomeProp: function() {
      console.log('someProp', this.someProp);
    },
    _incrementSomeProp: function() {
      this.someProp++;
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.8.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <custom-element></custom-element>

  <dom-module id="custom-element">
    <template>
      <media-element some-prop="{{typeElement}}"></media-element>
    </template>
  </dom-module>

  <dom-module id="media-element">
    <template>
      <button on-tap="_logSomeProp">Log someProp</button>
      <button on-tap="_incrementSomeProp">Incremeent someProp</button>
    </template>
  </dom-module>
</body>

codepen

我推荐阅读Polymer Data Binding。

Answer 3

好吧，我想，问题不在这里。问题出在子元素 (<media-element>) 上。所以我会 post 一个新问题来解决这个问题：

在创建元素之前如何初始化元素的属性？或者，如何触发 dom-if 在属性 change/init 之后调用我的条件函数？

我的代码：

<dom-module id="media-element">
  <template>
    <template is="dom-if" if="[[isType(0)]]">
      ....
    </template>
  </template>

  <script>
    Polymer({
      is: 'media-element',
      properties: {
        myType: {
          type: Number,
          value: 0
        }
      },
      isType: function(t){return (this.myType===t);}
    });
  </script>
</dom-module>

更新：我发送了我的问题并收到了很好的回答：

从 dom-repeat 访问元素的属性

Access element's property from dom-repeat

javascript

dom

polymer

polymer-1.0

从 dom-repeat 访问元素的 属性

Access element's property from dom-repeat

javascript

dom

polymer

polymer-1.0

从 dom-repeat 访问元素的属性