Динамически созданный импорт html внутри полимерного элемента (версия 1.0)

Динамически созданный импорт html внутри полимерного элемента

Кто-нибудь знает, как динамически добавить импорт html в полимерный элемент (версия 1.0)?

Код ниже не работает и жалуется, что... HTML element <link> is ignored in shadow tree.

Кто-нибудь знает какой-нибудь способ обойти это или знает лучший способ?

<!-- here is where the created import could go -->

<dom-module id="my-component">

<!-- here is where I'd ideally like the import to be created -->

  <template>
    <div id="container">

      <!--This is where my dynamically loaded element should be placed-->

    </div>
  </template>

  <script>
    Polymer({is:'my-component',
      attached: function(){

        var importElem = document.createElement('link');
        importElem.rel = 'import';
        importElem.href = '/components/my-dynamic-sub-component.html';
        this.root.appendChild(importElem);
        var app = document.createElement('my-dynamic-sub-component');
        this.$.container.appendChild(app);

      }
    });
  </script>

</dom-module>

javascript html web-component polymer polymer-1.0
person Jammer    schedule 05.06.2015    source источник

Ответы (2)


arrow_upward
11
arrow_downward

Polymer 1.0 имеет вспомогательную функцию importHref(href, onLoad, onError) для каждого компонента Polymer. Чтобы динамически импортировать и добавлять внешний элемент, вы можете использовать этот код:

this.importHref('path/to/page.html', function(e) {
  // e.target.import is the import document.
  var newElement = document.createElement('new-element');
  newElement.myProperty = 'foo';

  Polymer.dom(this.$.container).appendChild(newElement);  
}, function(e) {
  // loading error
});
person zacharytamas    schedule 05.06.2015
comment
.importHref это именно то, что я искал! Спасибо :) - person Jammer; 06.06.2015
comment
Я нашел документацию для тех, кто хочет прочитать об этом: polymer-project.org/1.0/docs/devguide/utility-functions.html - person Jammer; 06.06.2015

arrow_upward
1
arrow_downward

Я не уверен, что вы можете динамически добавить импорт HTML и заставить его работать внутри другого элемента, но вам нужно использовать API-интерфейс Polymer DOM. См. здесь.

Что-то вроде этого:

Polymer({is:'my-component',
  attached: function(){

    //create element and add it to this 
    var importElem = document.createElement('link');
    importElem.rel = 'import';
    importElem.href = '/components/my-dynamic-sub-component.html';
    Polymer.dom(this.root).appendChild(importElem);
    var app = document.createElement('component-controler');
    Polymer.dom(this.$.container).appendChild(app);
  }
});
person Ümit    schedule 05.06.2015