如何将#if型车把助手从ember 1.7翻译为ember-cli(2.3)

时间:2016-01-27 19:52:43

标签: ember.js ember-cli

我现在在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);
    }
});

这个想法非常简单:将第一个参数作为上下文属性,将第二个参数作为实际值,并根据它们的相等性返回一个布尔值。因此,例如,如果我在对象用户上有属性年龄,

{{#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}}

有没有办法真正使用车把助手,因为我们可以使用1.7?

2 个答案:

答案 0 :(得分:0)

经过一段时间的挖掘,似乎问题编辑是最好的前进方式。看来,从现在开始,这是车把助手的可接受方式。

要创建帮助器,请模拟:

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

这个链接指向了我正确的方向:https://guides.emberjs.com/v2.3.0/templates/writing-helpers/

这一个向我展示了可以做到的事情: http://emberigniter.com/how-to-equals-conditional-comparison-handlebars/

答案 1 :(得分:0)

首先有no more block helpers

  

Legacy Handlebars帮助程序被删除,有利于Ember.Helper   API。此API不提供帮助程序获取的机制   阻止,但确实引入了对可以使用的嵌套助手的支持   与内置助手(如{{#if}}和{{#each}})配合使用   达到同样的目的。

建议您像在示例中一样使用帮助程序({{#if (ifCond 1 1)}})。如果您决定采用这条路线,我建议您使用ember-truth-helpers插件。使用它你就可以抛弃你自己的帮手,并像这样使用它:

{{#if (eq user.age "22") }}
  <h2> Twin Twos!</h2>
{{/if}}

我发现真相助手非常灵活且易于理解,并建议使用它们。

或者,如果你想模拟你的旧助手,你需要使用一个组件,我会made a twiddle说明你如何做到这一点。