復選框的選中屬性綁定 - 聚合物

Question

我試圖將Polymer屬性綁定到CheckBox的checked屬性。 但是，該屬性的觀察者永遠不會被解雇，此外，該標簽也從不顯示任何文本。

但是，每次單擊CheckBox時我都能執行一個函數。

這是我的代碼：

<link rel="import" href="../../components/polymer/polymer.html">

<dom-module id="check-box-example">
  <template>
    <div>
      <label>
        <template if="{{checked}}">Uncheck</template>
        <template if="{{!checked}}">Check</template>
      </label><br>
      <input type="checkbox" checked="{{checked}}" on-click="_checkBoxClicked">Check Box
    </div>
  </template>
  <script>
    Polymer({
      is: 'check-box-example',
      properties:{
        checked: {
          type: Boolean,
          observer: '_checkedChanged'
        }
      },
      _checkBoxClicked: function() {
        console.log("The Check Box was clicked.");
      },
      _checkedChanged: function(newValue, oldValue) {
        console.log("New Checkbox value: " + newValue);
      },
    });
  </script>
</dom-module>

我究竟做錯了什么？ 提前致謝。

Answer 1

一些問題：

1. 您的模板缺失is="dom=if" ，因此它在您的代碼中無效。

2. 即使使用了dom-if ， if屬性也會設置為checked ，它沒有初始值。 僅當綁定屬性具有undefined值時才會計算綁定，並且由於從未設置checked ，因此模板不會標記任何內容（即，您不會看到“Check”或“Uncheck”）。

    properties: { checked: { type: Boolean, value: false // initial value required for binding } } 

3. 您的模板文字向后看。 if="{{checked}}"的文本內容為“取消選中”，而if="{{!checked}}"為“Check”。 也許這些是用戶指令而不是復選框狀態。

4. 本機input不會為其checked屬性發出更改事件，因此綁定不會更新已checked屬性。 相反，您可以更新Click-handler以顯式設置checked屬性以匹配已checked的input值。

    _checkBoxClicked: function(e) { this.checked = this.$.input.checked; } 

5. 您的label與input無關，因此單擊它不會更改checkbox的狀態。 你可以解決這個問題，通過使用label的for ：

    <label for="foo">...</label> <input id="foo"> 

   或通過input label的子項：

    <label> <input> </label> 

codepen