Question

我在父级中有两个组件，一个组件显示一个列表，我希望另一个组件向我显示列表项的详细信息。我正在使用此演示的列表https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages

因为我有这两个组件

<list-view data="[[fileData]]" on-item-click="_onItemClick"></list-view> <full-view on-close="_onClose"></full-view>

我想将点击列表视图的项目的ID传递给全视图。那么当单击“列表视图”项时，在“全视图”上执行事件的最佳方法是什么？我需要将信息从列表视图传递到全视图。

谢谢。

Answer 1

数据绑定怎么样？ @SG_回答没问题，但可以使用简单的数据绑定，如下所示：

<list-view data="[[fileData]]" on-item-click="_onItemClick" selected-id="{{idSelected}}"></list-view>
<full-view on-close="_onClose" selected-id="{{idSelected}}"></full-view>

每个元素模型都应具有“Selected ID”属性，以便能够执行数据绑定。在<full-view>中，您必须按以下方式添加属性：

selectedId:{type:String, observer:"selectedIdChanged"}

因此，当{I} <list-view>中的selectedId更改也将在<full-view>中更改现在，您只需要在<full-view>中添加一个新函数，以便对此已更改的selectedId执行某些操作

selectedIdChanged: function(newValue, oldValue){ 
  if(newValue!= undefined && newValue!=null){
    //do something with selected Id
  } 
},

Answer 2

您可以为id和list-view提供full-view，然后定义＆amp;从data设置<full-view>的{{1}}属性/属性。

_onItemClick

在父母的<list-view id='l_view' data="[[fileData]]" on-item-click="_onItemClick"></list-view> <full-view id="f_view" data="{}" on-close="_onClose"></full-view>。

script

在Polymer 1.0模块之间共享信息

2 个答案: