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？

如果没有 - 我仍然可以使用聚合物<sampler-scaffold>元素和iframe实现数据量大的应用吗？

我担心当我尝试连接到我的数据库并通过HTTP发送实时统计数据时，加载iframe而不是页面/元素会让我感到头疼

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教程。只需在聚合物项目网站上查看this article即可！

玩得开心:)！

修改Polymer的sampler-scaffold以加载自定义元素而不是iframe

2 个答案: