简体   繁体   English

如何在HTMLBars中编写助手?

[英]How to write Helpers in HTMLBars?

After the latest release of EmberJS v1.9.0 I am trying to move from Handlebars to HTMLbars. 在最新版本的EmberJS v1.9.0我试图从Handlebars转移到HTMLbars。 What I am finding very challenging is lack of documentation. 我发现非常具有挑战性的是缺乏文档。

I am trying to implement very simple helpers. 我正在尝试实现非常简单的帮助器。

For example take this handlebars helpers: 例如,拿这个把手帮手:

HTML HTML

<div id="main"></div>

<script type="text/x-handlebars" data-template-name="index">
    {{logIt test}}
    <h1>{{test}}</h1>
</script>

JS JS

App = Ember.Application.create({
    rootElement: '#main'
});

    App.IndexRoute = Ember.Route.extend({
        setupController: function(controller){
            controller.set('test', 'mytest');
        }
    });

    Ember.Handlebars.registerHelper("logIt", function(something) {
        console.log(something);
    });

Js Fiddle: http://jsfiddle.net/sisir/p463q2L8/ Js Fiddle: http//jsfiddle.net/sisir/p463q2L8/

How do I convert it to htmlbars? 如何将其转换为htmlbars?

As of Ember 1.10.0, this question is solved by doing Ember.HTMLBars.makeBoundHelper(theHelperFunction) . 从Ember 1.10.0开始,通过执行Ember.HTMLBars.makeBoundHelper(theHelperFunction)解决了这个问题。

Edit: since Ember 1.13.6 (July 31, 2015), using this is flagged as deprecated. 编辑:自Ember 1。13。6(2015年7月31日)起,使用此标记为已弃用。

DEPRECATION: Using Ember.HTMLBars._registerHelper is deprecated. 弃用:不推荐使用Ember.HTMLBars._registerHelper。 Helpers (even dashless ones) are automatically resolved. 助手(甚至是无助的)自动解决。 [deprecation id: ember-htmlbars.register-helper] [弃用ID:ember-htmlbars.register-helper]

As of Ember 1.13, there are two APIs: http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_new-ember-js-helper-api 从Ember 1.13开始,有两个API: http//emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_new-ember-js-helper-api

The simplest and more common syntax is now this: 最简单和更常见的语法现在是这样的:

export default Ember.Helper.helper(function(params, hash) {
  return params.join(' ');
});

Helpers receive two arguments: params are the ordered params passed to a helper, and hash contains the key-value options, for example title="Mr.". 助手接收两个参数:params是传递给助手的有序参数,hash包含键值选项,例如title =“Mr。”。

I believe you can just use Ember.Handlebars.helper which is what is in the latest emberjs guides . 我相信你可以使用Ember.Handlebars.helper ,这是最新的emberjs指南 This jsbin uses htmlbars and it works. 这个jsbin使用htmlbars,它的工作原理。 This is the helper in the jsbin 这是jsbin中的帮手

AppLogItHelper = Ember.Handlebars.helper("logIt", function(something){
  console.log(something);
});

If you are using ember-cli it will auto generate one for you but that uses Ember.Handlebars.makeBoundHelper which doesn't work in the jsbin but works in my ember-cli app. 如果您正在使用ember-cli ,它将自动为您生成一个但是使用Ember.Handlebars.makeBoundHelper ,它在jsbin中不起作用但在我的ember-cli应用程序中有效。

Very an important novelty is HTMLBars have subexpression ! 非常重要的新奇是HTMLBars有子表达式 Since Ember 1.10+ was switched to HTMLBars and you should use Ember.HTMLBars.makeBoundHelper instead Ember.Handlebars.registerHelper . 由于Ember 1.10+已切换到HTMLBars,您应该使用Ember.HTMLBars.makeBoundHelper而不是Ember.Handlebars.registerHelper But you can still use Ember.Handlebars.registerHelper from Ember 1.10.1 version 但您仍然可以使用Ember 1.10.1版本中的Ember.Handlebars.registerHelper

New approach: 新的方法:

App.XEqHelper = Ember.HTMLBars.makeBoundHelper(function(params, hash, options, env) {
    return params[0] === params[1];
    });

it call from templates as: 它从模板调用:

{{#if (x-eq order 'delivery_order')}}
    Need a delivery
{{/if}}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM