在dart-polymer 1.x中設置隱藏屬性

Question

我試圖在國家下拉菜單中選擇美國時切換（隱藏/取消隱藏）狀態下拉菜單

html的

    <paper-dropdown-menu
              label = "Country *"
              selected-item-label = "{{countrySelectedItemLabel}}"
              error-message = "Country is required"
              id = "countryDdm">
            <paper-menu class = "dropdown-content">
              <template
                  is = "dom-repeat"
                  items = "[[countries]]"
                  as = "country">
                <div>[[country.name]]</div>
                <br>
              </template>
            </paper-menu>
          </paper-dropdown-menu>

          <div class = "layout horizontal">
            <paper-dropdown-menu
                hidden = $"[[hideState]]"
                label = "State *"
                selected-item-label = "{{stateSelectedItemLabel}}"
                id = "stateDdm">
              <paper-menu class = "dropdown-content">
                <template
                    is = "dom-repeat"
                    items = "[[states]]"
                    as = "state">
                  <div>[[state.name]]</div>
                  <br>
                </template>
              </paper-menu>
            </paper-dropdown-menu>

相關的.dart代碼如下所示

##.dart


 @property
 bool hideState;


 @property
  String countrySelectedItemLabel = '';

@Listen( 'countryDdm.tap' )
  void toggleStateOnUSASelection( event, [_] ) {

    switch ( countrySelectedItemLabel ) {
       case 'United States of America':

        switch ( hideState ) {
          case true:
            hideState = false;
            break;

          case false:
            break;
        }
        break;
    }
  }

  void ready( ) {
    set('hideState', true);
  }

該應用程序將正常顯示，但是當我選擇“美國”時，則不會顯示狀態組合。 如果選擇了除美國以外的任何國家，我也想隱藏州組合。

任何幫助表示贊賞。 謝謝。

Answer 1

$位置錯誤

  hidden$="[[hideState]]"

實際的hidden屬性由Polymer設置。 這是為了解決諸如<img>元素的href之類的屬性的問題，在這些問題中，綁定表達式（不是圖像的實際URI的字符串）在Polymer甚至沒有機會解析綁定表達式之前都會產生錯誤消息。

還有其他一些問題（請參閱代碼中的注釋）

鏢

@HtmlImport('app_element.html')
library so33931432_hide_paper_dropdown.web.app_element;

import 'package:web_components/web_components.dart' show HtmlImport;
import 'package:polymer/polymer.dart';
import 'package:polymer_elements/paper_dropdown_menu.dart';
import 'package:polymer_elements/paper_menu.dart';

/// [PaperDropdownMenu], [PaperMenu]
@PolymerRegister('app-element')
class AppElement extends PolymerElement {
  AppElement.created() : super.created();

  @property
  List<String> countries = ['Austria', 'Belgium', 'Czech Republic', 'United States of America'];
  @property
  bool hideState; // = true; // you could set a default value, then you don't need ready

  // This way usually works better for me than @Listen
  @Property(observer: 'toggleStateOnUSASelection')
  String countrySelectedItemLabel = '';

  // If `@Property(observer: ...) is used the function signature 
  // has to be changed
  @reflectable
  void toggleStateOnUSASelection(String label, [_]) {
    switch (countrySelectedItemLabel) {
      // I wasn't sure what you actually tried to accomplish here
      // but this worked for me to reproduce your problem
      case 'United States of America':
        set('hideState', false);
        break;
      default:
        set('hideState', true);
    }
  }

  void ready() {
    set('hideState', true);
  }
}

HTML

<!DOCTYPE html>
<dom-module id='app-element'>
  <template>
    <paper-dropdown-menu
        label="Country *"
        selected-item-label="{{countrySelectedItemLabel}}"
        error-message="Country is required"
        id="countryDdm">
      <paper-menu class="dropdown-content">
        <template
            is="dom-repeat"
            items="[[countries]]"
            as="country">
          <div label="[[country]]">[[country]]</div>
        </template>
      </paper-menu>
    </paper-dropdown-menu>
    <div>selectedItem:<span>[[countrySelectedItemLabel]]</span> value: <span>[[countrySelectedItemLabel]]</span></div>
    <div>hideState: <span>[[hideState]]</span></div>
    <div class="layout horizontal">
      <paper-dropdown-menu
          hidden$="[[hideState]]"
          label="State *"
          selected-item-label="{{stateSelectedItemLabel}}"
          id="stateDdm">
        <paper-menu class="dropdown-content">
          <template
              is="dom-repeat"
              items="[[states]]"
              as="state">
            <div>[[state.name]]</div>
            <br>
          </template>
        </paper-menu>
      </paper-dropdown-menu>
    </div> <!-- missing in your question -->
  </template>
</dom-module>

在dart-polymer 1.x中設置隱藏屬性

問題描述

html的

1 個解決方案

解決方案1
0 已采納 2015-11-26 05:50:58

在dart-polymer 1.x中設置隱藏屬性

問題描述

html的

1 個解決方案

解決方案1 0 已采納 2015-11-26 05:50:58

解決方案1
0 已采納 2015-11-26 05:50:58