Question

我会尽量简单，我正处于我的应用程序的最后阶段（投资组合页面），我只需要页面之间的交互，所以：

简短问题：

如何选择某个使用模板生成的自定义元素的特定项目=“dom-repeat”并像属性一样发布，以便稍后在外部绑定另一个元素属性（selected =“{{}}”）

长问题：

从上到下形成。我有一个自定义元素，在neon-animated-pages中有两个元素。第一个元素是一个卡片网格，白色模板是=“dom-repeat”，第二个是另一个霓虹动画页面，里面是所有的工作页面（所有页面都以这样的声明方式进行更改{ {3}}）

投资组合页面模板：

<neon-animated-pages id="page" class="flex" selected="{{projectSelected}}">

 <portfolio-grid id="grid" on-tap="_goToProject" card-selected="{{selected}}"> <-- card-selected not defined yet -->
 </portfolio-grid>

 <work-pages work-selected="{{selected}}" on-back-portfolio="_backPortfolio">
 </work-pages>

</neon-animated-pages>

投资组合页面脚本：

Polymer({
  is: "portfolio-page",

  properties:{
   projectSelected:{
    type: Number,
    value: 0
   }
  },

  _goToProject: function(){
   this.projectSelected = 1;
  },

  _backPortfolio: function(){
   this.projectSelected = 0;
  }
});

投资组合网格内部是另一个自定义元素，一个带有标题和描述等属性的简单卡片，这里的img属性是投资组合卡片中的css id，用于设置我卡片的背景图片：

<dom-module id="portfolio-grid">
<template>
  <style>
    SOME STYLE HERE
  </style>

  <div class="layout horizontal wrap">

    <template is="dom-repeat" id="cardList" items="[[cards]]">

    <portfolio-card class$="{{item.class}}" img="{{item.img}}"
      title="{{item.title}}" description="{{item.description}}">
    </portfolio-card>

    </template>

  </div>
</template>

<script>
  Polymer({

    is: "portfolio-grid",

    behaviors: [
      Polymer.NeonAnimatableBehavior
    ],

    properties: {
      cards: {
        type: Array,
        value: function(){
          return [
            { img: 'monalisa', title: 'The Mona Lisa', 
            description: 'Painting', class: 'cardSmall'},
            { img: 'starrynight', title: 'Starry Night', 
            description: 'Painting', class: 'cardSmall'},
            { img: 'david', title: 'David', 
            description: 'Sculpture', class: 'cardMedium'},
            { img: 'memory', title: 'The Persistence Of Memory', 
            description: 'Painting', class: 'cardSmall'},
            { img: 'venus', title: 'Venus de milo', 
            description: 'Sculpture', class: 'cardSmall'},
            { img: 'birth', title: 'Birth of Venus', 
            description: 'Painting', class: 'cardMedium'},
            { img: 'guernica', title: 'The Guernica', 
            description: 'Painting', class: 'cardBig'},
            { img: 'nightwatch', title: 'The Night Watch', 
            description: 'Painting', class: 'cardSmall'},
            { img: 'kiss', title: 'The Kiss', 
            description: 'Painting', class: 'cardSmall'}
          ]
        }
      },

      animationConfig: {
        value: function() {
          return {
            'entry': {
              name: 'fade-in-animation',
              node: this,
              timing: 2000
              },
            'exit': {
              name: 'fade-out-animation',
              node: this
              }
            }
          }
        }
       }
  });
</script>
</dom-module>

最后我的工作页面，这里我已经完成了我想用固定导航控件展示的所有作品，一切正常（下一个，上一个和回到投资组合网格）：

<dom-module id="work-pages">
<template>
  <style>
  SOME STYLE HERE
  </style>

  <section id="container" class="layout vertical">
    <neon-animated-pages id="works" class="flex" attr-for-selected="work" selected="{{workSelected}}">

      <workpage-monalisa work="monalisa"></workpage-monalisa>
      <workpage-starrynight work="starrynight"></workpage-starrynight>
      <workpage-david work="david"></workpage-david>
      <workpage-memory work="memory"></workpage-memory>
      <workpage-venus work="venus"></workpage-venus>
      <workpage-birth work="birth"></workpage-birth>
      <workpage-guernica work="guernica"></workpage-guernica>
      <workpage-nightwatch work=nightwatch""></workpage-nightwatch>
      <workpage-kiss work="kiss"></workpage-kiss>

    </neon-animated-pages>
  </section>

  <!-- Navigation Buttons -->
  <div class="controls">
    <!-- Back Work Button -->
    <iron-icon id="menuIcon" icon="mrcauko-icons:menu"></iron-icon>
    <!-- Back Work Button -->
    <div id="back">
      <iron-icon class="button" icon="mrcauko-icons:back" on-tap="_goPrev"></iron-icon>
    </div>
    <!-- Next Work Button -->
    <div id="next">
      <iron-icon class="button" icon="mrcauko-icons:next" on-tap="_goNext"></iron-icon>
    </div>
      <!-- Bottom Bar -->
    <div class="bottomBar layout horizontal">
      <div class="flex"></div>
      <iron-icon id="backToPortfolio" icon="mrcauko-icons:view-portfolio" on-tap="_goBackPortfolio"></iron-icon>
      <div class="flex"></div>
    </div>
  </div>

</template>

<script>
  Polymer({

    is: "work-pages",

    behaviors: [
      Polymer.NeonAnimatableBehavior
    ],

    properties: {
      workSelected: {
        type: String,
        notify: true
      },
      animationConfig: {
        type: Object,
        value: function() {
          return {
            'entry': {
              name: 'fade-in-animation',
              node: this
            },
            'exit': {
              name: 'fade-out-animation',
              node: this
              }
            }
          }
        }
    },

    listeners: {
      'neon-animation-finish': '_onNeonAnimationFinish'
    },

    _onNeonAnimationFinish: function(){       //This isn't working
      this.$.works.scroller.scrollTop = 0;
    },

    _goBackPortfolio: function(){
      this.fire('back-portfolio');
    },

    _goPrev: function() {
      this.$.works.selectPrevious();
    },

    _goNext: function() {
      this.$.works.selectNext();
    }

  });
</script>

我一直在考虑不同的方法，但不知道如何实现它们。

因为我在工作页面中的item.img和attr-for-selected =“work”中有相同的名字，不知何故说“嘿，当我点击这张卡片时，item.work与工作选择“（参见portfolio-page）
不知道我是否需要使用demo
将一个组合网格包裹在铁选择器元素中，以建立attr-for-selected $ =“{{item.img}}”（尚未尝试过，但我认为这种方式使用了太多元素，而我确定有更好的方法）

我知道有霓虹动画页面的演示，但我的项目更具体，除了演示的代码太复杂，因为我对js的了解很少（这就是为什么我喜欢聚合物，因为我可以创造伟大的事情，我不是js的专业知识）。我不是要求做我的工作，只是只有一些启发才能继续。所以我向你这些神仙寻求帮助。

Answer 1

如果您只需要您的数据来自＆lt; portfolio-grid＆gt;到＆lt; work-pages＆gt;，然后我认为数组选择器是要走的路。

实现起来应该相当简单，就像文档中的示例一样（请参阅您提供的链接）。

选择模板dom-repeat上的项目以使用neon-animated-pages

简短问题：

长问题：

1 个答案: