在另一個選擇的值中顯示紙張下拉菜單

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