데이터 바인딩 된 뷰에서 If-Else 구조를 템플릿하는 방법은 무엇입니까?

데이터 바인딩 된 뷰에서 If-Else 구조를 템플릿하는 방법은 무엇입니까?

---

KO 기반 HTML 템플릿에서이 관용구를 지속적으로 사용하고 있습니다.

<!-- ko if: isEdit -->
<td><input type="text" name="email" data-bind="value: email" /></td>
<!-- /ko -->
<!-- ko ifnot: isEdit -->
<td data-bind="text: email"></td>
<!-- /ko -->

KO에서 조건을 수행하는 더 나은 / 깨끗한 방법이 있습니까, 아니면 전통적인 if-else 구조를 사용 하는 것보다 더 나은 접근 방식 이 있습니까?

또한 Internet Explorer (IE 8/9)의 일부 버전이 위의 예를 올바르게 구문 분석하지 못한다는 점을 지적하고 싶습니다. 자세한 내용은 이 SO 질문 을 참조하십시오. 요약하자면 IE를 지원하기 위해 테이블 ​​태그 내에 주석 (가상 바인딩)을 사용하지 마십시오. 사용 tbody을 대신 :

<tbody data-bind="if: display"><tr><td>hello</td></tr></tbody>

---

이러한 유형의 코드를 처리 할 수있는 몇 가지 방법이 있습니다.

• 지금과 같은 if / ifnot 조합으로. 이것은 잘 작동하며 매우 장황하지 않습니다.

• Michael Best의 스위치 / 케이스 바인딩 ( https://github.com/mbest/knockout-switch-case )은 매우 유연하며이 문제와 더 복잡한 문제 (true / false보다 많은 상태)를 쉽게 처리 할 수 ​​있습니다.

• 또 다른 옵션은 동적 템플릿을 사용하는 것입니다. 관찰 가능 항목을 기반으로 사용되는 템플릿 이름을 사용하여 영역을 하나 이상의 템플릿에 바인딩합니다. 다음은이 주제에 대해 얼마 전에 작성한 게시물입니다. http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html . 시나리오에서 다음과 같이 보일 수 있습니다.

<td data-bind="template: $root.getCellTemplate"></td>

<script id="cellEditTmpl" type="text/html">
    <input type="text" name="email" data-bind="value: email" />
</script>

<script id="cellTmpl" type="text/html">
    <span data-bind="text: email"></span>
</script>

getCellTemplate기능은 어디든지 살 수 있지만, 첫 번째 인수로 항목 ($ 데이터)를 제공 할 것입니다 및 사용에 템플릿의 이름을 반환합니다.

---

한 가지 방법은 명명 된 템플릿 (인수 전달을 지원할 수 있음)을 사용하는 것입니다.

<!-- ko template: isEdit() ? 'emailEdit' : 'emailDisplay' --><!-- /ko -->
<script id="emailEdit" type="text/html">
    <td><input type="text" name="email" data-bind="value: email" /></td>
</script>
<script id="emailDisplay" type="text/html">
    <td data-bind="text: email"></td>
</script>

또 다른 옵션은 다음과 같이 작동 하는 내 스위치 / 케이스 플러그인 을 사용하는 것입니다.

<!-- ko switch -->
    <!-- ko case: isEdit -->
        <td><input type="text" name="email" data-bind="value: email" /></td>
    <!-- /ko -->
    <!-- ko case: $else -->
        <td data-bind="text: email"></td>
    <!-- /ko -->
<!-- /ko -->

---

if : / ifnot : 조합을 사용할 때 녹아웃 바인딩의 재 계산을 방지하려면 'with :'구성과 함께 사용할 수 있습니다.

    <!-- ko with: $data.DoSomePerformanceCriticalWork($data.SomeParameter()) -->
        <!-- ko if: $data.Condition() -->
           ... some markup ...
        <!-- /ko -->
        <!-- ko ifnot: $data.Condition() -->
           ... some markup ...
        <!-- /ko -->
    <!-- /ko -->

---

이제 knockout-else바인딩 / 플러그인도 있습니다 (이 문제를 해결하기 위해 작성했습니다).

참고 URL : https://stackoverflow.com/questions/11553999/how-to-template-if-else-structures-in-data-bound-views