Динамично зареждане на HTML страница с помощта на Polymer importHref

Пиша прост елемент, който зарежда html файлове, използвайки помощната функция на Polymer 1.0 importHref(). Страницата се зарежда, но вместо html изобразяването на страницата, получавам [object HTMLDocument].

Когато регистрирам успешното обратно извикване, импортираната страница е обвита в #document обект (не съм сигурен относно терминологията тук). Но цялата информация е там в конзолата.

И така, въпросът ми е: Как да изобразя html на страницата?

елемент:

<dom-module id="content-loader">

<template>
    <span>{{fileContent}}</span>
</template>

<script>

Polymer({

    is: "content-loader",

    properties: {
        filePath: {
            type: String
        }
    },

    ready: function() {
        this.loadFile();
    },

    loadFile: function() {
        var baseUrl;

        if (!window.location.origin)
        {
            baseUrl = window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
        }
        else
        {
            baseUrl = window.location.origin;
        }

        //import html document and assign to fileContent
        if(this.filePath)
        {
            this.importHref(baseUrl + this.filePath, function(file){
                this.fileContent = file.target.import;
                console.log(this.fileContent); //logs fine
            },
            function(error){
                console.log(error);
            });
        }
    }

});

</script>

in use:

<content-loader file-path="/app/general/contact.html"></content-loader>

javascript web-component polymer
person anthony    schedule 25.06.2015    source източник

Отговори (1)


arrow_upward
5
arrow_downward

<span>{{fileContent}}</span> ще изобрази fileContent преобразувано към низ, поради което виждате [object HTMLDocument] (което получавате, когато извикате toString() на document обект).

Като цяло Polymer няма да ви позволи да се свържете с HTML или съдържание на възел, защото това е риск за сигурността.

fileContent, което имате, е document, което означава, че е колекция от DOM възли. Как използвате този документ зависи от съдържанието, което сте заредили. Един от начините за изобразяване на възлите е да добавите fileContent.body към вашия локален DOM, така:

Polymer.dom(this.root).appendChild(this.fileContent.body);

Ето по-пълен пример (http://jsbin.com/rafaso/edit?html,output):

<content-loader file-path="polymer/bower.json"></content-loader>

<dom-module id="content-loader">

  <template>
    <pre id="content"></pre>
  </template>

  <script>

    Polymer({
      is: "content-loader",
      properties: {
        filePath: {
          type: String,
          observer: 'loadFile'
        }
      },

      loadFile: function(path) {
        if (this.filePath) {
          console.log(this.filePath);
          var link = this.importHref(this.filePath, 
            function() {
              Polymer.dom(this.$.content).appendChild(link.import.body);
            },
            function(){
              console.log("error");
            }
          );
        }
      }
    });

  </script>
</dom-module>
person Scott Miles    schedule 26.06.2015