Question

我正在使用具有以下结构的Polymer构建元素：

  <template>

    <style>
      ...
    </style>

    <div class="card-header" layout horizontal center>
      <content select="img"></content>
      <content select="h1"></content>
    </div>
    <content></content>

  </template>

  <script>

    Polymer({});

  </script>
</polymer-element>

我尝试为src的{{1}}属性设置默认值，以防其未在<content select="img">元素内故意设置：

<e-card>

在浏览器上，脚本中的值应用于Shadow DOM的... <script> Polymer({ srcimg: 'default-picture.png' }); </script> ...，但不会应用于<content select="img">内的<img>元素。如何在<e-card>元素中应用src属性的默认值？

Answer 1

可能更容易继续在元素中生成图像标记，并将src属性发布到元素外。然后你可以在js中设置默认路径，并且内容仍然是用户可配置的。

<polymer-element name="test-element" attributes="img height width">
<template>

<style>
  ...
</style>

<div class="card-header" layout horizontal center>
  <img src="{{img}}" height="{{height}}" width="{{width}}">
  <content select="h1"></content>
</div>
<content></content>

</template>

<script>

Polymer({
  ready: function () {
    this.img = "default image url";
    this.height = "100px";
    this.width = "100px"
  }
});

</script>
</polymer-element>

将默认属性设置为Polymer内容标记

1 个答案: