在另一个选择的值中显示纸张下拉菜单

Question

我试图仅在另一个paper-dropdown-menu中选择特定值时才显示paper-dropdown-menu。

我使用了一个名为selectedValue选定值绑定到if属性在dom-if模板属性。

<link rel="import" href="../bower_components/polymer/polymer-element.html"> 
<link rel="import" href="../bower_components/polymer/lib/elements/dom-if.html"> 
<link rel="import" href="../bower_components/polymer/lib/elements/dom-repeat.html"> 
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> 
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html"> 
<link rel="import" href="../bower_components/paper-item/paper-item.html"> 

<dom-module id="my-element"> 
    <template> 
     <paper-dropdown-menu label="One" no-animations> 
      <paper-listbox slot="dropdown-content" class="dropdown-content" selected="{{selectedValue}}"> 
       <template is="dom-repeat" items="[[options1]]"> 
        <paper-item>[[item]]</paper-item> 
       </template> 
      </paper-listbox> 
     </paper-dropdown-menu> 

     <template is="dom-if" if="[[_view()]]"> 
      <paper-dropdown-menu label="Two" no-animations> 
       <paper-listbox slot="dropdown-content" class="dropdown-content"> 
        <template is="dom-repeat" items="[[options2]]"> 
         <paper-item>[[item]]</paper-item> 
        </template> 
       </paper-listbox> 
      </paper-dropdown-menu> 
     </template> 
    </template> 

    <script> 
     /** 
     * @customElement 
     * @polymer 
     */ 
     class MyElement extends Polymer.Element { 
      static get is() { return 'my-element'; } 

      static get properties() { 
       return { 
        selectedValue : { 
         type : String 
        }, 
        options1 : { 
         type: Array, 
         value: [1,2,3,4] 
        }, 
        options2 : { 
         type: Array, 
         value : [5,6,7] 
        } 
       }; 
      } 

      _view() { 
       return this.selectedValue === "1"; 
      } 
     } 

     window.customElements.define(MyElement.is, MyElement); 
    </script> 
</dom-module> 

问题是第二个paper-dropdown-menu从不显示。

Answer 1

问题是你的计算绑定没有依赖关系，所以它在初始化时被调用一次。由于selectedValue最初为undefined,_view()返回false，导致dom-if隐藏其内容。

为了使计算结合重新评估selectedValue，确保指定的变量作为自变量，以所述结合：

<template is="dom-if" if="[[_view(selectedValue)]]">...</template> 

还要注意的是<paper-listbox>.selected（向其selectedValue结合）是number通过缺省（即，所选择的项目的索引），所以该表达式计算结果始终为false：

selectedValue === "1" 

我建议从切换字面到number：

selectedValue === 1 

所以，_view功能应该是这样的：

_view(selectedValue) { 
    return selectedValue === 1; 
} 

demo