एक हैंडलबार टेम्पलेट के भीतर बूलियन तर्क

Question

क्या हैंडलबार्स सशर्त के भीतर बूलियन तर्क निष्पादित करना संभव है?

अभी मैं एक नियंत्रक समारोह के साथ इस व्यवहार धोखा, तो मैं नियंत्रक

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

कौन सा मुझे

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

के हैंडल टेम्पलेट का उपयोग करने की अनुमति देता है के साथ खत्म हो और उस ठीक काम करता है, लेकिन कुछ समस्याएं उठाती हैं। सबसे पहले, यह हो रहा है कि क्या हो रहा है (विशेष रूप से यदि अच्छे फ़ंक्शन नामों का उपयोग नहीं किया जाता है)। दूसरा, ऐसा लगता है कि एमवीसी अलगाव पर थोड़ा सा उल्लंघन होता है।

यह

<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}} व्यवहार करता है

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

falsey और बाकी सब कुछ truthy [] के रूप में जबकि जावास्क्रिप्ट में truthy है के रूप में

truthiness परीक्षण Handlebars मैच के लिए समायोजित करने के लिए चाहते हो सकता है।

डेमो: 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}}