修改 Polymer 的采样器脚手架以加载自定义元素而不是 iframe

Question

我喜欢 Google Polymer 的 <sampler-scaffold>

的外观和过渡

您可以在聚合物网站上看到它的实际效果：sampler-scaffold

我想将它用于单页应用程序 (SPA)，并希望将我的自定义元素加载到脚手架中，而不是加载与我的 SPA 模型无关的无关 iframe。

实际交换发生在他们的代码中：

frameLoaded: function() {
    if (!this.item) {
      return;
    }
    this.$.frame.contentWindow.addEventListener('polymer-ready', function() {
      setTimeout(this.updateFrameHeight.bind(this), 100);
      this.$.frame.contentWindow.addEventListener('core-resize',
        this.boundResizeFrame, false);
    }.bind(this));
  },

和被操作的DOM对象：

<!-- main content -->
<div id="frameContainer">
    <iframe id="frame" on-load="{{frameLoaded}}"></iframe>
</div><!-- End main content -->

我尝试做的是用内容元素替换 iframe 元素，并将我的自定义元素加载到内容标签中，但页面根本不加载向上滑动的主面板，也没有记录任何错误。此外，还有一些帮助函数可以在 iframe 加载后调整框架高度。您可以在此处查看 <sampler-scaffold>:

的源代码

sampler scaffold source

有没有人修改 <sampler-scaffold> 以远离加载 iframe？

如果不能，我还能用 polymer 的 <sampler-scaffold> 元素和 iframe 实现数据密集型应用吗？

我担心加载 iframe 而不是 pages/elements 只会让我在尝试连接到我的数据库并通过 HTTP 发送实时统计信息时感到头疼

Answer 1

HTML

<!-- main content -->
<div id="frameContainer">
<content select=".testpage" fit></content>
</div><!-- End main content -->

JS

  ready: function() {
    window.addEventListener('hashchange', this.parseLocationHash.bind(this));
  },

  domReady: function() {
    this.async(function() {
      this.parseLocationHash();
    }, null, 300);
  },

  parseLocationHash: function() {
    var route = window.location.hash.slice(1);
    for (var i = 0, item; item = this.$.menu.items[i]; i++) {
      if (item.getAttribute('tag') === route) {
        this.$.menu.selected = i;
        return;
      }
    }
    this.$.menu.selected = this.$.menu.selected || 0;
  },

  menuSelect: function(e, detail) {
    if (detail.isSelected) {
      this.item = detail.item;
      if (this.item.children.length) {
        this.item.selected = 0;
      }

      this.item.tag = this.item.getAttribute('tag');
      var url = this.item.getAttribute('url');
      window.location.hash = this.item.tag;

      if (this.narrow) {
        this.$.drawerPanel.closeDrawer();
      } else {
        this.animateCard();
      }
    }
  },

  animateCard: function() {
    this.$.card.classList.remove('move-up');
    this.$.card.style.display = 'none';
    this.async(function() {
      this.$.card.style.display = 'block';
      this.moveCard(this.$.mainHeaderPanel.offsetHeight);
      this.async(function() {
        this.$.card.classList.add('move-up');
        this.moveCard(null);
      }, null, 300);
    });
  },

  moveCard: function(y) {
    var s = this.$.card.style;
    s.webkitTransform = s.transform = 
        y ? 'translate3d(0, ' + y + 'px,0)' : '';
  },

  cardTransitionDone: function() {
    if (this.$.card.classList.contains('move-up')) {
      this.$.card.classList.remove('move-up');
    }
  },

  togglePanel: function() {
    this.$.drawerPanel.togglePanel();
  },

index.html

<custom-element class="testpage"></custom-element>

      <div class="testpage" style="margin: 20px;"> Augue duis dolore te feugait nulla, facilisi nam liber tempor cum soluta nobis eleifend option. Legere me lius quod ii legunt saepius claritas est. Exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Humanitatis per seacula quarta decima et quinta decima eodem modo typi. Insitam est usus legentis in iis qui facit eorum. Litterarum formas qui nunc nobis videntur parum clari fiant sollemnes in? Nostrud ea commodo consequat duis autem vel eum iriure dolor in hendrerit in vulputate velit esse?</div>

现在加载标准元素和自定义元素，而不是任何外部 iframe。

Answer 2

我不太确定你到底想达到什么目的。但我确实知道一个非常好的 SPA 教程。只需在 polymer-project 网站上查看 this article！

玩得开心:)！

修改 Polymer 的采样器脚手架以加载自定义元素而不是 iframe

Modifying Polymer's sampler-scaffold to load custom elements instead of iframes

javascript

html

iframe

polymer

web-component