콧수염의 복잡한 템플릿 구성

Question

사용자의 냉장고 내용을 표시하는 웹 응용 프로그램을 고려하십시오. 무엇보다도 현재 냉장고에있는 과일 목록을 표시해야합니다. 과일의 각 유형은 매우 다른 디스플레이가 필요합니다. 가장 중요한 것은 많은 종류의 과일이있을 것입니다.

콧수염 템플릿 라이브러리를 사용하여 이것을 구현하고 싶지만, 최선의 방법이 무엇인지 잘 모르겠습니다.

는 우선, 여기에 각 과일에 대한 템플릿 : 1

은 "보기 모델"또는 "보기 도우미"개체 작성하여 템플릿 데이터를 준비 되세요

{{! apple.mustache }} 
A {{appleType}} apple from {{groceryStore}} 

{{! orange.mustache }} 
An orange from {{countryOfOrigin}} 

{{! banana.mustache }} 
A {{ripeness}} banana 

...many more templates here... 

접근에 " isBanana "/"isOrange "/ etc. 키를 템플릿에 전달합니다. 나는이 방법이 인터넷에 여러 장소를 권장 본 적이

You have the following food in your fridge: 

{{#fruits}} 
     {{#isApple}} 
       {{> apple}} 
     {{/isApple}} 
     {{#isOrange}} 
       {{> orange}} 
     {{/isOrange}} 
     {{#isBanana}} 
       {{> banana}} 
     {{/isBanana}} 
     ...more conditionals.... 
{{/fruits}} 

:이 경우, 냉장고 템플릿은 다음과 같을 것이다. 그러나 나는 그것이 어떻게 확장되는지 볼 수 없다 : 냉장고 템플릿은 새로운 과일 타입이 추가 될 때마다 수정되어야한다. 그것은 또한 Mustache의 "논리가없는"철학에 반대하는 것으로 보인다. 2

접근 뷰 모델은 각 과일의 종류에 맞는 템플릿을 결정을 렌더링, 및 템플릿의 데이터로 HTML을 반환에 대한 책임합니다.

You have the following food in your fridge: 

{{{fruits}}} 

그리고 뷰 모델 : 냉장고 템플릿은 지금과 같이 보일 것이다

이

class InventoryViewModel 
{ 
    // ... 

    function getFruits() 
    { 
     foreach ($this->fridge->getFruits() as $fruit) { 
      if ($fruit instanceof Banana) { 
       $html .= $this->mustache->render(...); 
      } elseif ($fruit instanceof Apple) { 
       $html .= $this->mustache->render(...); 
      } else { 
       // ... 
      } 
     } 

     return $html; 
    } 
} 

(가) 첫 번째 옵션보다 더 나은 것 같다,하지만 각 뷰 모델에 콧수염 템플릿 렌더링 객체를 주입해야합니다. 가능하다면이 커플 링을 피하고 싶습니다. 3

접근은 공식 콧수염 사양의 일부가 아니다 템플릿 구성 기능의 일종을 사용합니다. (https://github.com/janl/mustache.js/pull/242, https://github.com/mustache/spec/issues/38 등).

어떤 옵션이 가장 좋으며 그 이유는 무엇입니까? 나는 더 나은 것을 간과하고 있는가?

Answer 1

아마도 가장 간단한 방법은 ViewModel의 상위 섹션 (람다 섹션)을 사용하여 부분을 선택하는 것입니다.

귀하의 기본 템플릿은 다음과 같이 보일 것입니다 :

{{# items }} 
    {{# getPartial }}{{ type }}{{/ getPartial }} 
{{/ items }} 

가정 당신의 과일은 물론 '유형'이 있습니다. 그런 다음 getPartial에 대한 고차원 섹션을 추가 것 :

<?php 

class InventoryViewModel 
{ 
    // ... 

    function getPartial() 
    { 
     // you could do string manipulation here, 
     // but I prefer the explicitness of a `case` 

     return function($tpl, $mustache) { 
      switch ($mustache->render($tpl)) { 
       case 'Banana': 
        return '{{> banana }}'; 
       case 'Apple': 
        return '{{> apple }}'; 
       case 'Orange': 
        return '{{> orange }}'; 
      } 
     }; 
    } 
} 

를이 경우, 템플릿은이 테스트 장치, 조롱 할 수있다 뷰 모델을 동반하는 논리를 이동하여 "논리없는"남아있다, 등등.