为什么 Polymer 核心列表选择中的切换操作不正确？

Question

在 Selected: {{selection.app_id}} 下面的代码中，当我点击一个选择时，它会正确显示。但是在 JS 控制台中，我得到 Uncaught TypeError: Cannot read property 'app_id' of undefined 第一次点击该项目然后当我再次点击时它输出正确的 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

希望对您有所帮助:)

为什么 Polymer 核心列表选择中的切换操作不正确？

Why the incorrect toggle action in Polymer core-list selection?

javascript

polymer