핸들 막대 템플릿 내의 부울 논리

Question

조건부 핸들러 내에서 부울 논리를 수행 할 수 있습니까? ,

는 지금은 컨트롤러 기능이 동작을 스푸핑, 그래서 나는 나를

<script type="text/x-handlebars"> 
    {{#if both}} 
    <p> both were true </p> 
    {{/if}} 
</script> 

의 핸들 템플릿을 사용할 수 있습니다 컨트롤러

App.ApplicationController = Ember.Controller.extend({ 
    bool1: true, 
    bool2: true, 
    both: function(){ return this.bool1 && this.bool2; }.property('content.both'), 
}); 

으로 끝낼하고 잘 작동합니다 그러나 약간 문제를 제기한다. 첫째로, 어떤 일이 일어나고 있는지 알지 못합니다 (특히 좋은 함수 이름을 사용하지 않는 경우). 둘째, MVC 분리에 대해 약간의 침해가있는 것 같습니다.

그것은

<script type="text/x-handlebars"> 
    {{#if bool1 && bool2}} <!-- this will not actually work --> 
    <p> both were true </p> 
    {{/if}} 
</script> 

의 라인을 따라 뭔가를하고 그것이 작동 한 수 있습니까?

Answer 1

당신은 직접 할 수는 없지만 약간의 arguments 구문 분석과 가변적 인 도우미로하기는 어렵지 않습니다. 이런 식으로 뭔가 :

Handlebars.registerHelper('if_all', function() { 
    var args = [].slice.apply(arguments); 
    var opts = args.pop(); 

    var fn = opts.fn; 
    for(var i = 0; i < args.length; ++i) { 
     if(args[i]) 
      continue; 
     fn = opts.inverse; 
     break; 
    } 
    return fn(this); 
}); 

그리고 템플릿 당신이 말할 수 있습니다 : 당신이 필요로

이

{{#if_all a b c}} 
    yes 
{{else}} 
    no 
{{/if_all}} 

당신은 {{#if_all}}에 많은 인수를 사용할 수 있습니다. 당신은 {{#if}} 취급

falsey와 자바 스크립트에서 truthy입니다 [] 반면 truthy로 다른 모든 것들과 같은

`false`, `undefined`, `null`, `""` or `[]` (a "falsy" value) 

때문에 핸들 바 일치하도록 truthiness 테스트를 조정할 수 있습니다.

데모 : http://jsfiddle.net/ambiguous/vrb2h/

Answer 2

당신이 도우미 핸들 시도 할 수 있습니다 :

Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) { 

switch (operator) { 
    case '==': 
     return (v1 == v2) ? options.fn(this) : options.inverse(this); 
    case '===': 
     return (v1 === v2) ? options.fn(this) : options.inverse(this); 
    case '<': 
     return (v1 < v2) ? options.fn(this) : options.inverse(this); 
    case '<=': 
     return (v1 <= v2) ? options.fn(this) : options.inverse(this); 
    case '>': 
     return (v1 > v2) ? options.fn(this) : options.inverse(this); 
    case '>=': 
     return (v1 >= v2) ? options.fn(this) : options.inverse(this); 
    case '&&': 
     return (v1 && v2) ? options.fn(this) : options.inverse(this); 
    case '||': 
     return (v1 || v2) ? options.fn(this) : options.inverse(this); 
    default: 
     return options.inverse(this); 
} 

});

이처럼 호출 :

{{#ifCond showDistance "&&" distance}} 
     <span class="distance"> 
      {{distance}} 
     </span> 
{{else}} 
     {{#if showRegion}} 
      <span class="region"> 
      </span> 
     {{/if}} 
{{/ifCond}}