콧수염 JS 및 병합 템플릿 내가 콧수염 템플릿 주위에 내 머리를 얻을 수없는 어떤 이유로

Question

와 함께이 템플릿을 병합 ... 위의

var template = '<div class="thing"><h2>{{head}}</h2><p>{{text}}</p>{{>passwordStrength}}</div>', 
    partials = { 
     passwordStrength: '<div class="pStrength"><span>{{weak}}</span><span>{{medium}}</span><span>{{strong}}</span></div>' 
    }, 
    view = { 
     email: { 
      head: 'Email addresses', 
      text: 'are very useful if you use them properly...' 
     }, 
     password: { 
      head: 'Password', 
      text: 'Put in the password of your choice', 

      passwordStrength: { 
       weak: 'Weak', 
       medium: 'Medium', 
       strong: 'Strong' 
      } 

     } 
    }; 

    $.mustache(template, view['password'], partials['passwordStrength']); 

작동하지만 난 방법의 종류하지 않는 것 기대할 것 같아. 모든 텍스트가 여기에 번역되도록 뷰 내의 모든 텍스트 콘텐트를 유지하고 싶습니다. 암호 비트가 렌더링 될 때만 원하는 passwordStrength 'partial/template thingy'. 나는 이것이 어떻게 행해질 지에 대해서는 확신하지 못합니다. {{# passwordStrength}} {{/ passwordStrength}}는 존재하는 경우에만 렌더링 하겠지만, 부분적으로 패스해야한다는 것을 생각하면 {{> passwordStrength}}입니다. 나는 그것이 항상 나타나기를 원하지 않는다 ... 단지 내용이있을 때에 만. 나는이 모든 것을 완전히 잘못하고 있나?

나는 조건이 충족 될 때만 템플릿이 나타나기를 원한다고 생각한다. (우리는 패스워드 뷰를보고있다.) 그런 다음 나는 그 템플릿의 포인트에 반하는 템플릿에 로직을 넣고있다. 나는이가

감사 처리하기위한 것입니다 방법을 조금 혼란 스러워요 있도록하지만 passwordStrength 비트, 템플릿 안에 돔

해야

편집 : 유래는 내 자신의 질문에 대답 못하게하고 난 왜 내게 그렇게 할 수 없는지 확신 할 수 없기 때문에 내 원래 질문을 내 대답으로 편집해야합니다.

부품을 사용할 필요가 없습니다. ials ... 난 그냥 원래의 템플릿에 passwordStrength HTML을 추가하고 {{#passwordStrength}} {{/ passwordStrength}}로 감싸므로 그곳에 (패스워드보기에서만) 다음에 HTML을 선택하면보기에 제공된 텍스트가 사용됩니다. 좋아요 :

var template = '<div class="thing"><h2>{{head}}</h2><p>{{text}}</p>{{#passwordStrength}}<div class="pStrength"><span>{{weak}}</span><span>{{medium}}</span><span>{{strong}}</span></div>{{/passwordStrength}}</div>', 
view = { 
    email: { 
     head: 'Email addresses', 
     text: 'are very useful if you use them properly...' 
    }, 
    password: { 
     head: 'Password', 
     text: 'Put in the password of your choice', 

     passwordStrength: { 
      weak: 'Weak', 
      medium: 'Medium', 
      strong: 'Strong' 
     } 

    } 
}; 

$.mustache(template, view['password']); 

Answer 1

전체 partials 개체를 전달하지 않았기 때문에 원래 문제가 발생했습니다. partials 매개 변수는 부분 문자열 다음에 이름이 지정된 키와 템플리트 값을 갖는 객체 여야합니다.

데이터가있는 경우 선택 적으로 표시하려면 {{#passwordStrength}}으로 포장해서 올릴 수 있다는 대답 자체는 맞습니다.

<script type="text/html" id="template"> 
    <div class="thing"> 
    <h2>{{head}}</h2> 

    <p>{{text}}</p> 

    {{>passwordStrength}} 
    </div> 
</script> 

<script type="text/html" id="passwd"> 
    {{#passwordStrength}} 
    <div class="pStrength"> 
     <span>{{weak}}</span> 
     <span>{{medium}}</span> 
     <span>{{strong}}</span> 
    </div> 
    {{/passwordStrength}} 
</script> 

JS이 외에 거의 동일합니다 : 당신이 내가 읽을 수있는 JS를 쉽게하기 위해 HTML을 분리 http://jsfiddle.net/maxbeatty/GQ2Fj/

working- 볼 수 있도록

은 내가 jsFiddle에 원래의 게시물을 수정 전체 partials 개체를 전달 :

var template = $('#template').html(), 
partials = { 
    passwordStrength: $('#passwd').html() 
}, 
view = { 
    email: { 
     head: 'Email addresses', 
     text: 'are very useful if you use them properly...' 
    }, 
    password: { 
     head: 'Password', 
     text: 'Put in the password of your choice', 

     passwordStrength: { 
      weak: 'Weak', 
      medium: 'Medium', 
      strong: 'Strong' 
     } 

    } 
}, 
html = Mustache.render(template, view['password'], partials); 

document.write(html);