polymer3.x用户界面在隐藏功能方面存在问题

Question

我正面临隐藏功能方面的问题。我将值从一页传递到另一页，我可以获取绑定值，但是无法将绑定值应用于隐藏属性。

//..........First page........

// On-tap() while clicking the button this method will execute.Passing the dependent type ,cshoweditview and pshoweditview values to the next page through the reference object.
onAdd() {

  if (this.selection == "Partner") {

    var reference = {
      'type': this.selection,
      'cshowEditView': false,
      'pshowEditView': true

    };
    console.log(reference);

    this.reference = reference;
    console.log("78" + this.reference);
    this.set('view', 'edit-view');
  } else if (this.selection == "Children") {

    var reference = {
      'type': this.selection,
      'cshowEditView': true,
      'pshowEditView': false,

    };
    console.log(reference);

    this.reference = reference;
    console.log("89" + this.reference);
    this.set('view', 'edit-view');

  }

}

<!-- ............First page................... -->
<paper-dropdown-menu label="DEPENDENT TYPE" id="crsp-security" class="menu" error-message="Security Clerance is required!">
  <paper-listbox slot="dropdown-content" id="atype" selected="{{selection}}" class="dropdown-content menu" required fallback-selection="0" attr-for-selected="value">
    <paper-item value="Partner">Partner</paper-item>
    <paper-item value="Children">Children</paper-item>
    <paper-item value="Nominee">Nominee</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

<paper-button id="add-icon" on-tap="onAdd" raised class="blue">
  <span>Add Dependent</span>
</paper-button>
<dependent-info id="detailView" name="edit-view" view="{{view}}" state="[[reference]]" list="{{references}}"></dependent-info>



<!-- ......Second page............ // I am trying to bind the values to this hidden property. -->
<paper-dropdown-menu label="CHILD" id="cshowEditView" name="cshowEditView" class="menu" value="{{state.cshowEditView}}" hidden$=[[!state.cshowEditView]] error-message="Company Type is required!">
  <paper-listbox slot="dropdown-content" id="title" class="dropdown-content menu" required attr-for-selected="value">

    <paper-item value="Mr">Mr</paper-item>
    <paper-item value="Mrs">Mrs</paper-item>
    <paper-item value="Miss">Miss</paper-item>

  </paper-listbox>
</paper-dropdown-menu>

<paper-dropdown-menu label="PARTNER" id="pshowEditView" name="pshowEditView" hidden$=[[!state.pshowEditView]] class="menu" error-message="Company Type is required!">
  <paper-listbox slot="dropdown-content" id="title" class="dropdown-content menu" required fallback-selection="1" attr-for-selected="value">
    <paper-item value="Mr">Mr</paper-item>
    <paper-item value="Mrs">Mrs</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

Answer 1

尝试使用this.set方法来观察对象的变化。首先在就绪函数的父级设置对象值，例如：

DEMO

ready() {
    super.ready()
    this.set('reference', { 'type' : 'Partner',
                        'cshowEditView' :true,
                        'pshowEditView' : false }
}

然后将reference属性设置如下：

onAdd () {
        this.set('reference.type', this.selection)
        this.set('reference.cshowEditView', this.selection=="Partner" ? true:false)
        this.set('reference.pshowEditView', this.selection=="Partner" ? false:true)
}