logic boolean trong một handlebars mẫu

Question

Có thể thực hiện logic boolean trong tay lái có điều kiện không?

Ngay bây giờ tôi giả mạo hành vi này với một chức năng điều khiển, vì vậy tôi kết thúc với bộ điều khiển

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

nào cho phép tôi sử dụng một mẫu tay lái của

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

và hoạt động tốt, nhưng nêu ra một số vấn đề. Trước hết, nó che khuất những gì đang xảy ra (đặc biệt nếu không sử dụng tên hàm tốt). Thứ hai, nó dường như vi phạm một chút về sự tách biệt MVC.

Có thể làm điều gì đó dọc theo dòng của

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

và đã cho nó hoạt động?

Answer 1

Bạn không thể làm điều đó trực tiếp nhưng không khó thực hiện với một chút việc phân tích arguments và trình trợ giúp variadic. Một cái gì đó như thế này:

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); 
}); 

Và sau đó trong một mẫu mà bạn có thể nói:

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

Bạn có thể sử dụng bao nhiêu lý lẽ để {{#if_all}} như bạn cần. Bạn có thể muốn điều chỉnh kiểm tra truthiness để phù hợp với tay lái từ {{#if}} xử lý

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

như falsey và mọi thứ khác như truthy trong khi [] là truthy trong JavaScript.

Demo: http://jsfiddle.net/ambiguous/vrb2h/

Answer 2

có thể bạn có thể thử tay lái này helper:

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); 
} 

});

và gọi nó như thế này:

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