如何将#if type handlebars helpers 从 ember 1.7 翻译成 ember-cli (2.3)
How do I translate #if type handlebars helpers from ember 1.7 to ember-cli (2.3)
我现在在 ember1.7 中有这个注册的车把助手。
var get = Ember.Handlebars.get;
Ember.Handlebars.registerHelper('ifCond', function(val1, val2, options) {
var context = (options.fn.contexts && options.fn.contexts[0]) || this;
var val1 = get(context, val1, options.fn);
if (val1 == val2) {
return options.fn(this);
} else {
return options.inverse(this);
}
});
这个想法非常简单:将第一个参数作为上下文 属性,第二个参数作为实际值,return 一个基于它们相等性的布尔值。因此,例如,如果我有一个对象用户的 属性 年龄,
{{#ifCond user.age "22" }}
<h2> Twin Twos!</h2>
{{/ifCond}}
将是满足条件时用于呈现 h2 元素的片段。
但是,我不知道如何为 ember-cli 翻译这样的助手。
我考虑过制作一个组件,但我需要一个有条件的组件,而不是呈现一组特定 DOM 元素的组件。我觉得我错过了什么。我怎样才能使 {{#ifCond}} 在 Ember 2.3 中工作?
编辑:我找到了一个帮助程序创建文档,让我可以执行此操作:
import Ember from 'ember';
export function ifCond(params/*, hash*/) {
return (params[0] === params[1]);
// return params;
}
export default Ember.Helper.helper(ifCond);
然而,为了让它起作用,我必须写(在模板中)
{{#if (ifCond 1 1)}}
yep
{{/if}}
还有没有办法像我们在 ember 1.7 中那样实际使用车把助手?
经过一段时间的挖掘,问题编辑似乎是最好的前进方式。从现在开始,这似乎是车把助手的公认方式。
要创建助手,请模拟:
import Ember from 'ember';
export function ifCond(params/*, hash*/) {
return (params[0] === params[1]);
// return params;
}
export default Ember.Helper.helper(ifCond);
然后,以这种格式将其包含在模板中。
{{#if (ifCond 1 1)}}
yep
{{/if}}
这个link给我指明了正确的方向:https://guides.emberjs.com/v2.3.0/templates/writing-helpers/
这一个向我展示了可以做什么:
http://emberigniter.com/how-to-equals-conditional-comparison-handlebars/
Legacy Handlebars helpers are removed in favor of the Ember.Helper
API. This API does not provide a mechanism for helpers to take a
block, but does introduce support for nested helpers which can be used
in concert with built-in helpers (like {{#if}} and {{#each}}) to
achieve the same ends.
建议像您在示例中那样使用助手 ({{#if (ifCond 1 1)}}
)。如果您决定走这条路,我建议您使用 ember-truth-helpers 插件。使用它你可以扔掉你自己的助手并像这样使用它:
{{#if (eq user.age "22") }}
<h2> Twin Twos!</h2>
{{/if}}
我发现真相助手非常灵活且易于理解,因此推荐使用它们。
或者,如果您想模拟您的旧助手,您需要为此使用一个组件,我已经 made a twiddle 来说明如何做到这一点。
我现在在 ember1.7 中有这个注册的车把助手。
var get = Ember.Handlebars.get;
Ember.Handlebars.registerHelper('ifCond', function(val1, val2, options) {
var context = (options.fn.contexts && options.fn.contexts[0]) || this;
var val1 = get(context, val1, options.fn);
if (val1 == val2) {
return options.fn(this);
} else {
return options.inverse(this);
}
});
这个想法非常简单:将第一个参数作为上下文 属性,第二个参数作为实际值,return 一个基于它们相等性的布尔值。因此,例如,如果我有一个对象用户的 属性 年龄,
{{#ifCond user.age "22" }}
<h2> Twin Twos!</h2>
{{/ifCond}}
将是满足条件时用于呈现 h2 元素的片段。
但是,我不知道如何为 ember-cli 翻译这样的助手。
我考虑过制作一个组件,但我需要一个有条件的组件,而不是呈现一组特定 DOM 元素的组件。我觉得我错过了什么。我怎样才能使 {{#ifCond}} 在 Ember 2.3 中工作?
编辑:我找到了一个帮助程序创建文档,让我可以执行此操作:
import Ember from 'ember';
export function ifCond(params/*, hash*/) {
return (params[0] === params[1]);
// return params;
}
export default Ember.Helper.helper(ifCond);
然而,为了让它起作用,我必须写(在模板中)
{{#if (ifCond 1 1)}}
yep
{{/if}}
还有没有办法像我们在 ember 1.7 中那样实际使用车把助手?
经过一段时间的挖掘,问题编辑似乎是最好的前进方式。从现在开始,这似乎是车把助手的公认方式。
要创建助手,请模拟:
import Ember from 'ember';
export function ifCond(params/*, hash*/) {
return (params[0] === params[1]);
// return params;
}
export default Ember.Helper.helper(ifCond);
然后,以这种格式将其包含在模板中。
{{#if (ifCond 1 1)}}
yep
{{/if}}
这个link给我指明了正确的方向:https://guides.emberjs.com/v2.3.0/templates/writing-helpers/
这一个向我展示了可以做什么: http://emberigniter.com/how-to-equals-conditional-comparison-handlebars/
Legacy Handlebars helpers are removed in favor of the Ember.Helper API. This API does not provide a mechanism for helpers to take a block, but does introduce support for nested helpers which can be used in concert with built-in helpers (like {{#if}} and {{#each}}) to achieve the same ends.
建议像您在示例中那样使用助手 ({{#if (ifCond 1 1)}}
)。如果您决定走这条路,我建议您使用 ember-truth-helpers 插件。使用它你可以扔掉你自己的助手并像这样使用它:
{{#if (eq user.age "22") }}
<h2> Twin Twos!</h2>
{{/if}}
我发现真相助手非常灵活且易于理解,因此推荐使用它们。
或者,如果您想模拟您的旧助手,您需要为此使用一个组件,我已经 made a twiddle 来说明如何做到这一点。