聚合物'detail.item'赢得't返回正确的对象

Polymer 'detail.item' won't return the correct object

本文关键字:对象 返回 赢得 detail item 聚合物      更新时间:2023-09-26

上帝保佑,我无法让选择(或动画页面)发挥作用。我试着遵循教程,但他们没有提到如何实际执行从一个页面到另一个页面的转换(或者有些事情我完全不理解),我的猜测是我应该只需要设置core-animated-pagesselected值,但这也不起作用。

首先,detail.item对象似乎没有包含正确的内容。我可能做错了什么小事。当尝试从on-core-select事件访问"detail.item.selectedIndex"时,我只得到undefined。如果我使用:this.$.selector.selectedIndex通过id访问属性,它将起作用。

同样做以下事情似乎也无济于事:

var pages = this.$.pages;
pages.selected = selectedIndex;

请参阅下面的代码,了解我正在尝试做什么:

<!-- 2. Load the component using an HTML Import -->
... Imports here ...
<polymer-element name='index-app'>
  <template>
    <core-scaffold>
      <core-header-panel navigation flex mode="seamed">
        <core-toolbar>Application</core-toolbar>
        <core-menu theme="core-light-theme" >
          <core-selector on-core-select="{{selectAction}}" id="selector">
            <core-item icon="settings" label="item1"></core-item>
            <core-item icon="settings" label="item2"></core-item>
          </core-selector>
        </core-menu>
      </core-header-panel>
      <div tool>{{item.label}}</div>
      <div class="content">
        <core-animated-pages transitions="cross-fade-all" id="pages" selected="{{selected}}">
          <section id="page1" hidden?="{{selected!=0}}">
            <div cross-fade>Home page contents</div>
          </section>
          <section id="page2" hidden?="{{selected!=1}}">
            <div cross-fade>Gallery contents</div>
          </section>
        </core-animated-pages>
      </div>
    </core-scaffold>
  </template>
  <script>
    Polymer({
      ready: function(){
        this.$.selector.selected = 0;
      },
      selectAction: function(e, detail){
        var selectedIndex = this.$.selector.selectedIndex;
        var pages = this.$.pages;
        pages.selected = selectedIndex;
      }
    });
  </script>
</polymer-element>

尝试对核心选择器和核心动画页面使用selected={{selection}}}。如果我没有记错的话,selected发布的属性绑定到这两个元素的项的索引。在核心选择器中,它将绑定到所选项目的索引,在核心动画页面中,它会提取绑定值并将其用作索引,以获取页面并显示该页面。

换句话说,您不需要事件处理程序或手动操作隐藏元素。数据绑定系统为您处理这一切。