聚合物进口动态HTML

Question

我正在使用 Polymer

的产品列表移动应用程序

所以我想在单击缩略图时加载产品详细信息，如 3 张图像描述和其他详细信息，

我正在使用 core-animated-pages 来显示产品缩略图和详情视图

这里是HTML

<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

我使用 app-router 延迟加载元素或 html，尤其是核心动画页面。与 cordova 配合使用也能很好地插入应用程序。但是，请注意，由于 shadow DOM 不是 Polymer 1.0 中的默认值，并且 <core-animated-pages> 移动到 <neon-animated-pages> 并且在 api 中有显着差异，因此当您尝试移植时它不再有效到 1.0，至少在重新设计之前不会。但是，如果您打算在不使用核心动画页面的情况下坚持使用 0.5 或移植到 1.0，它仍然可以正常工作。你可以看看here.

聚合物进口动态HTML

Polymer import dynamic HTML

javascript

polymer