Question

在下面的代码中，当我点击某个选项时，所选的{{selection.app_id}}会正确显示。但是在JS控制台中，我得到了Uncaught TypeError：无法读取属性＆＃39; app_id＆＃39;在第一次单击该项时未定义，然后当我再次单击它时输出正确的app_id。同时选中：{{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

loadApp调用on-tap函数，在组件设置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核心列表选择中的错误切换操作？

1 个答案: