为什么聚合物核心列表选择中的切换操作不正确

Question

在下面的代码中，当我单击某个选择时，Selected:｛｛selection.app_id｝｝将正确显示。然而，在JS控制台中，我得到了Uncaught TypeError：第一次单击该项时无法读取undefined的属性"app_id"，然后当我再次单击时，它会输出正确的app_id。同时Selected:｛｛selection.app_id｝｝清除app_id。

最终，函数loadApp将呈现核心列表父级中的另一个元素。但我需要先解决这个问题。有什么想法吗？

<polymer-element name="tdv-apps" attributes="username">
  <template>
    <link rel="stylesheet" href="tdv-apps.css">
    <div>My Apps
    <core-list id="appsList" data="{{data}}" scrollTarget="{{$.contentPanel.scroller}}" height="100%" selectionEnabled="true" selection="{{selection}}">
       <br/>Selected: {{selection.app_id}}
      <template>
        <div id="current" class="row {{ {selected: selected} | tokenList }}" layout horizontal on-tap="{{loadApp}}">
        <p class="app">Name: {{model.name}} -- ID: {{model.app_id}} <br/> Description: {{model.description}}</p>
        </div>
      </template>
    </core-list>
    </div>
  </template>
  <script>
    (function () {
      Polymer('tdv-apps', {
        ready: function() {
           //apps_list will be pulled from the server via JS or a core-ajax element 
          this.data = [
            {name: "App 1", app_id: 'tdvapp-001', description:" App number 1."},
            {name: "App 2", app_id: 'tdvapp-002', description:" App number 2."},
            {name: "App 3", app_id: 'tdvapp-003', description:" App number 3."},
            {name: "App 4", app_id: 'tdvapp-004', description:" App number 4."},
            {name: "App 5", app_id: 'tdvapp-005', description:" App number 5."},
            {name: "App 6", app_id: 'tdvapp-006', description:" App number 6."},
            {name: "App 7", app_id: 'tdvapp-007', description:" App number 7."},
            {name: "App 8", app_id: 'tdvapp-008', description:" App number 8."},
            {name: "App 9", app_id: 'tdvapp-009', description:" App number 9."},
            {name: "App 10", app_id: 'tdvapp-010', description:" App number 10."},
            {name: "App 11", app_id: 'tdvapp-011', description:" App number 11."},
            {name: "App 12", app_id: 'tdvapp-012', description:" App number 12."}
          ];        
        },
        loadApp: function(){
          console.log(this.$.appsList.selection.app_id)
        },
      }); // Polymer close
    })();
  </script>
</polymer-element>

Answer 1

on-tap调用的loadApp函数在组件设置selection属性之前调用。

第一次调用时，在调用时不会选择任何内容。

如果不使用on-tap而是侦听selection:上的更改，则可以执行您想要的操作

<polymer-element name="tdv-apps" attributes="username">
  <template>
    <link rel="stylesheet" href="tdv-apps.css">
    <div>My Apps
    <core-list id="appsList" data="{{data}}" scrollTarget="{{$.contentPanel.scroller}}" 
               height="100%" selectionEnabled="true" selection="{{selection}}">
      Selected: {{selection.app_id}}
      <template>
        <div id="current" class="row {{ {selected: selected} | tokenList }}" layout horizontal >
        <p class="app">Name: {{model.name}} -- ID: {{model.app_id}} <br/> Description: {{model.description}}</p>
        </div>
      </template>
    </core-list>
    </div>
  </template>
  <script>
    (function () {
      Polymer('tdv-apps', {
        ready: function() {
           //apps_list will be pulled from the server via JS or a core-ajax element 
          this.data = [
            {name: "App 1", app_id: 'tdvapp-001', description:" App number 1."},
            {name: "App 2", app_id: 'tdvapp-002', description:" App number 2."},
            {name: "App 3", app_id: 'tdvapp-003', description:" App number 3."},
            {name: "App 4", app_id: 'tdvapp-004', description:" App number 4."},
            {name: "App 5", app_id: 'tdvapp-005', description:" App number 5."},
            {name: "App 6", app_id: 'tdvapp-006', description:" App number 6."},
            {name: "App 7", app_id: 'tdvapp-007', description:" App number 7."},
            {name: "App 8", app_id: 'tdvapp-008', description:" App number 8."},
            {name: "App 9", app_id: 'tdvapp-009', description:" App number 9."},
            {name: "App 10", app_id: 'tdvapp-010', description:" App number 10."},
            {name: "App 11", app_id: 'tdvapp-011', description:" App number 11."},
            {name: "App 12", app_id: 'tdvapp-012', description:" App number 12."}
          ];        
        },
        selectionChanged: function(){
          console.log(this.$.appsList.selection.app_id)
        },
      }); // Polymer close
    })();
  </script>
</polymer-element>   

Plunker在这里：http://plnkr.co/edit/rOuNPu99D7ROX4ewbLnK?p=preview

我希望它能有所帮助：(