Question

我想在Polymer元素上直接声明属性，然后在元素内部传递，并且元素脚本的外部可读/可访问。

我想使用这些属性的值来决定如何注册元素。

TL;博士

我有一个问题，我需要在整个页面加载后的某个时间注册一个元素 - 即我想手动注册该元素。

按需注册元素的解决方案：

 <dom-module id="foo-element">
   <template>
     <span> Foo element </span>
   </template>
 </dom-module>

 <script>
  window.addEventListener("app-ready", function() {
    "use strict";

    Polymer({

      is: "foo-element",

      properties: { 
      //..... rest of element properties, methods, etc

解释我上面做的事情：

我使用HTMLImports.whenReady(<element-registration-code>)

addEventListener(event, <element-registration-code>

我希望注册发生时广播app-ready
这允许我注册元素 on-demand

上述解决方案的可重用性问题

这会造成严重的可重用性问题 - 虽然上下文中的一个元素需要在某个特定时间点注册，但在其他情况下可能不会注册 - 它应该使用标准注册自己{ {1}}方法。

一个理想的例子：

HTMLImports.whenReady(<elementCode>)

，元素看起来像这样：

<!-- Registers automatically when `HTMLImports` are ready, the "regular" way-->
<foo-element></foo-element>

<!-- Registers only when it picks up an `app-ready` event-->
<foo-element no-auto-register register-on-event="app-ready"></foo-element>

长话短说

有没有办法直接在元素上声明一个标志/属性/属性来决定如何进行注册？

Answer 1

将attribute传递给元素可能不起作用，因为元素需要处于ready状态。以下三种方法可以帮助您完成正在尝试的内容

{p> lazy register Polymer中Polymer.Class元素的一种方式是使用Polymer而不是

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">

<dom-module id="poly-form">
  <template>
    <style></style>
    I am parent Element
    <div>
      <button onclick='register()'>Save</button>
    </div>
    <show-form></show-form>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'poly-form',
  });

  //element to lazy register
  var showForm = Polymer.Class({
    is: 'show-form',
    ready: function() {
      this.textContent = 'I am working...';
    }
  });

  function register() {
    var form = document.querySelector('poly-form');

    //lazy register the element
    document.registerElement('show-form', showForm);
  }
</script>


<poly-form></poly-form>

构造函数。这样，直到您手动注册元素，它将不会被渲染。下面是一个相同的工作示例。

show-form

在此示例中，dom元素在单击按钮之前不会呈现。

注意我从未尝试使用包含global setting的元素。

第二种方式这也应该可以使用importHref方法。

第三种方式是var Promise = require('promise'); /* The list of objects */ var ingrd_list = JSON.parse(req.body.ingrd_list); /* func.addFood is my function to apply on. It takes a callback parameter as last parameter */ var pAddFood = Promise.denodeify(func.addFood); var pArray = []; ingrd_list.forEach(function(ingrd){ var my_p = pAddFood(ingrd); pArray.push(my_p); }); Promise.all(pArray).then(function(){ console.log("success !"); }) .catch(function(){ console.log("failure !"); }); lazy-register，其中元素仅在调用其第一个实例时才会注册。

很抱歉，这段代码的构造并不像以前那么好。希望它有所帮助。

Answer 2

Class Style Constructor

如果要设置自定义元素的原型链但不立即注册，可以使用Polymer.Class函数。 Polymer.Class采用与Polymer函数相同的原型参数，并设置原型链，但不注册该元素。相反，它返回一个构造函数，该构造函数可以传递给document.registerElement以向浏览器注册元素，然后可以通过代码实例化元素的新实例。
var MyElement = Polymer.Class({

 is: 'my-element',

 // See below for lifecycle callbacks
   created: function() {
      this.textContent = 'My element!';
   }

});
document.registerElement('my-element', MyElement);

// Equivalent:
var el1 = new MyElement();
var el2 = document.createElement('my-element');

在Polymer元素注册

按需注册元素的解决方案：

上述解决方案的可重用性问题

一个理想的例子：

长话短说

2 个答案: