Polymer 'detail.item' 不会 return 正确的对象
Polymer 'detail.item' won't return the correct object
看在上帝的份上,我无法让选择(或与此相关的动画页面)起作用。我尝试按照教程进行操作,但他们没有在任何地方提及如何实际执行从一页到另一页的转换(或者有一些我完全不理解的东西),我的猜测是我应该只需要设置 [= core-animated-pages
的 14=] 值,但这也不起作用。
首先,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
published 属性 绑定到这两个元素的项目索引。在您的核心选择器中,它将绑定到已选择项目的索引,在核心动画页面中,将拉取绑定值并将其用作抓取页面并显示该页面的索引。
换句话说,您不需要事件处理程序或手动操作隐藏元素。数据绑定系统会为您处理这一切。
看在上帝的份上,我无法让选择(或与此相关的动画页面)起作用。我尝试按照教程进行操作,但他们没有在任何地方提及如何实际执行从一页到另一页的转换(或者有一些我完全不理解的东西),我的猜测是我应该只需要设置 [= core-animated-pages
的 14=] 值,但这也不起作用。
首先,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
published 属性 绑定到这两个元素的项目索引。在您的核心选择器中,它将绑定到已选择项目的索引,在核心动画页面中,将拉取绑定值并将其用作抓取页面并显示该页面的索引。
换句话说,您不需要事件处理程序或手动操作隐藏元素。数据绑定系统会为您处理这一切。