在 dart-polymer 中设置隐藏属性 1.x

Question

我正在尝试切换 (hide/unhide> 状态下拉菜单，当美国 select 在国家/地区下拉菜单中

.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);
  }

应用程序正常显示，但当我 select 'United States of America' 状态组合未显示时。如果除美国以外的任何国家/地区 selected.

，我也想隐藏州组合

感谢任何帮助。谢谢

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

Setting a hidden attribute in dart-polymer 1.x

dart

dart-polymer

.html