聚合物导入动态HTML

Question

我正在使用Polymer开发一个产品清单移动应用程序

所以当我点击缩略图的时候，我想加载产品的详细信息，比如3张图片和其他细节，

我使用core-animated-pages显示产品缩略图和细节视图

这里是

<div id="article-content" >
<template is="auto-binding" id="page-template" >
 <core-ajax
    id="ajaxpolo" auto
    url="./json/products.json"
    handleAs="json"
    response="{{productList}}">
  </core-ajax>
<core-animated-pages id="fpages" flex selected="{{$.polo_cards.selected}}" on-core-animated-pages-transition-end="{{transitionend}}" transitions="cross-fade-all slide-from-right">
<section vertical layout>
      <div id="noscroll" fit hero-p>
        <div id="container" flex horizontal wrap around-justified layout cross-fade >
          <section on-tap="{{selectView}}" id="polo_cards" >

            <template repeat="{{item in productList}}">
              <div class="card" vertical center center-justified layout hero-id="item-{{item.id}}" hero?="{{$.polo_cards.selected === item.id || lastSelected === item.id }}" > <span cross-fade hero-transition style="">{{item.name}}</span></div>
            </template>
 </section>
        </div>
      </div>
    </section>

    <template repeat="{{item in productList}}">
      <section vertical layout>
        <div class="view" flex vertical center center-justified layout hero-id="item-{{item.id}}"    hero?="{{$.polo_cards.selected === item.id || $.polo_cards.selected === 0}}"   >
          <core-icon-button class="go_back" icon="{{$.polo_cards.selected != 0 ? 'arrow-back' : 'menu'}}" on-tap="{{goback}}"></core-icon-button>
          {{item.name}} <span cross-fade class="view-cont" style="height:1000px; overflow:scroll;"></span></div>
      </section>
    </template>


  </core-animated-pages>
</template>

 template.selectView = function(e,detail,sender){

    /* set core-animated page Selected */ 
   var i = e.target.templateInstance.model.item.id;
      sender.selected = i;


    });

如果我将所有细节都放在详细视图中，那么加载起来会花费太长时间，所以我希望在单击每个产品的缩略图时加载其HTML。

我该怎么做？

Answer 1

我使用应用程序路由器来延迟加载元素或html，特别是核心动画页面.与cordova很好地工作，以及插入应用程序。但是，请注意，由于Multimer1.0中没有默认的影子DOM，而且<core-animated-pages>迁移到<neon-animated-pages>时apis有很大的差异，所以当您尝试将其移植到1.0时，它将不再起作用，至少在重新工作之前是如此。但是，如果您计划在不使用核心动画页的情况下坚持使用0.5或端口到1.0，那么它仍然工作得很好。你可以去看看这里。