在创建时为子元素初始化动态默认值

Question

我正在尝试弄清楚如何在初始化本地 DOM 之前使动态值对子元素可用。我创建了一个自定义元素，其中嵌入了 Google Map 元素：

<dom-module id="place-picker">
  <template>
    <google-map api-key="..." />
  </template>
</dom-module>

Polymer({
  is: "place-picker",
  created: function() {
    this.apiKey = someFunctionToRetreiveApiKey()
  }
})

我想立即向 google-map 元素提供 API 键。它需要在 DOM 初始化之前，因为 google-map 元素会尝试立即加载。但是 Polymer 的 properties 没有被评估。使用数据绑定 api-key="[[apiKey]]" 不起作用，因为我没有将其声明为 property.

Answer 1

我以一种有点老套的方式解决了这个问题。 created 回调的上下文是原始 HTML 元素，因此您可以简单地设置它的属性，由于某种原因，它在本地 DOM 创建之前被评估为属性。我最终得到：

# CoffeeScript
Polymer
  is: "place-picker"
  properties:
    googleWebApiKey:
      type: String

  created: ->
    @setAttribute("google-web-api-key", functionToRetrieveApiKey())

# Slim HTML
template
  google-map api-key="[[googleWebApiKey]]"

Answer 2

我更喜欢使用属性对象的 "value" 键来设置值，但它应该类似于上面提到的创建函数，你也可以使用计算键。

   <dom-module id="place-picker">
     <template>
       <google-map api-key="[[apiKey]]" />
     </template>
   </dom-module>
   Polymer({
     is: "place-picker",
     properties : {
        apiKey : {
          type: String,
          value: functionToRetrieveApiKey()
        }
     }
   })

在创建时为子元素初始化动态默认值

Initializing dynamic default values for sub-elements on creation

polymer

polymer-1.0