Javascript 车把模板中的布尔逻辑
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14839375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
boolean logic within a handlebars template
提问by BostonJohn
Is it possible to perform boolean logic within a handlebars conditional?
是否可以在车把条件中执行布尔逻辑？
Right now I spoof this behavior with a controller function, so I end up with the controller
现在我用控制器功能欺骗了这种行为，所以我最终得到了控制器
App.ApplicationController = Ember.Controller.extend({
bool1: true,
bool2: true,
both: function(){ return this.bool1 && this.bool2; }.property('content.both'),
});
Which allows me to use a handlebars template of
这允许我使用把手模板
<script type="text/x-handlebars">
{{#if both}}
<p> both were true </p>
{{/if}}
</script>
and that works fine, but raises some problems. First off, it obscures what's happening (particularly if good function names aren't used). Secondly, it seems to infringes a bit on the MVC separation.
这工作正常，但会引发一些问题。首先，它掩盖了正在发生的事情（特别是如果没有使用好的函数名称）。其次，它似乎侵犯了MVC分离。
Is it possible to do something along the lines of
是否有可能按照以下方式做一些事情
<script type="text/x-handlebars">
{{#if bool1 && bool2}} <!-- this will not actually work -->
<p> both were true </p>
{{/if}}
</script>
and have it work?
让它工作吗？
回答by materliu
may be you can try this handlebars 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);
}
});
});
and invoke it like this :
并像这样调用它：
{{#ifCond showDistance "&&" distance}}
<span class="distance">
{{distance}}
</span>
{{else}}
{{#if showRegion}}
<span class="region">
</span>
{{/if}}
{{/ifCond}}
回答by mu is too short
You can't do it directly but it isn't that hard to do with a little bit of argumentsparsing and a variadic helper. Something like this:
你不能直接做到这一点，但通过一点点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);
});
And then in a template you can say:
然后在模板中你可以说：
{{#if_all a b c}}
yes
{{else}}
no
{{/if_all}}
You can use as many arguments to {{#if_all}}as you need. You might want to adjust the truthiness test to match Handlebars since {{#if}}treats
您可以{{#if_all}}根据需要使用尽可能多的参数。您可能想要调整真实性测试以匹配 Handlebars 因为{{#if}}对待
`false`, `undefined`, `null`, `""` or `[]` (a "falsy" value)
as falsey and everything else as truthy whereas []is truthy in JavaScript.
as falsey 和其他一切都为真，而[]在 JavaScript 中为真。
