확인란의 확인 된 속성 바인딩 - 폴리머

Question

Polymer 속성을 CheckBox의 확인 된 속성에 바인딩하려고합니다. 그러나 재산의 옵저버는 결코 해고 당하지 않으며, 라벨에는 텍스트가 표시되지 않습니다.

그러나 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이 설정되지 않았기 때문에 평가됩니다. 템플릿은 내용을 스탬프하지 않습니다 (즉, "확인"또는 "선택 취소"되지 않음).

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

3. 서식 파일 텍스트가 거꾸로 보입니다. if="{{checked}}"의 텍스트 내용은 "선택 취소"이며 if="{{!checked}}"은 "확인"입니다. 아마도 그것들은 체크 박스 상태보다는 사용자 지침 일 것입니다.

4. 네이티브 input은 checked 속성에 대한 change-event를 방출하지 않으므로 바인딩은 checked 속성을 업데이트하지 않습니다. 대신 클릭 처리기를 업데이트하여 checked 속성을 input의 checked 값과 일치하도록 설정할 수 있습니다. 귀하의 label

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

5. 그렇게는 checkbox의 상태를 변경하지 않습니다 클릭하면 input 아무런 관련이 없습니다. 당신은 label의 for를 사용하여 해당 문제를 해결 수 :

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

   또는 inputlabel의 자식함으로써 : 그것은 기대 작품으로

   <label> 
       <input> 
   </label> 
   

codepen