dom-if 사용 지침 및 JS 프레임워크의 속성 Polymer_Basic 지식

가장 기본적인 분기문인 특정 속성의 값을 기반으로 템플릿 렌더링이 필요한 경우가 종종 있습니다. Angular에는 ng-if가 있고 Polymer에는 dom-if가 있습니다. 사실 dom-if는 이 주제에 대한 액세스 포인트일 뿐입니다. 사실 제가 소개하고 싶은 것은 is 속성입니다.
이전에 소개된 dom-repeat와 마찬가지로 dom-if는 is 속성을 통해 템플릿 요소에 사용됩니다. 예를 들어 다음 예에서는 두 템플릿이 바인딩된 컨트롤의 부울 값을 기반으로 렌더링되어야 하는지를 결정합니다. 실행

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <input type="checkbox" checked="{{checked::change}}">
  <template is="dom-if" if="[[checked]]">true</template>
  <template is="dom-if" if="[[!checked]]">false</template>
 </template>
 <script>
  Polymer({
   properties: {
    checked: { value: false }
   },
   is: 'demo-test'
  });
 </script>
</dom-module>

<demo-test></demo-test>

dom-if이든 이전 dom-repeat이든, 이러한 속성은 정확히 무엇을 지정합니까? 사실 Angular와 동일합니다. 둘 다 Directive 개념이지만 Polymer에서는 이를 Directive라고 부르지 않습니다. 예를 들어 다음 예에서는 div 요소에 is="demo-test" 항목을 추가합니다.

실행

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<script>
 Polymer({
  is: 'demo-test',
  extends: 'div', <!-- 关键就在这里
  ready: function(e) {
   this.innerHTML = '我是一个 demo-test';
  }
 });
</script>

<div is="demo-test"></div>

정의할 때 확장을 통해 태그 이름을 지정하여 is 지시문을 가져옵니다. 위의 예는 Shadow DOM을 직접 생성하고 원하는 작업을 수행할 수 있는 가장 간단한 사용법입니다. 실제로 Polymer에 내장된 dom-repeat, dom-if 및 기타 dom-*도 이러한 방식으로 정의됩니다. 하지만 이 내용은 자세히 보면 매우 복잡해 보이고, 제 글은 초급 수준에 불과합니다. 좀 더 구체적인 사용법을 알고 싶다면 소스 코드를 읽어보세요. (정의된 공식 문서도 찾을 수 없습니다.) .