CODEWITHSUNDEEP
ember.jshandlebars.js
Vasiliy vvscode Vanchuk
Vasiliy vvscode Vanchuk

Reputation: 7159

How to create ember handlebar helper?

Hy to all

I try to create helper

Handlebars.registerHelper('testCan', function(permissionName, options){
  var permission = Ember.Object.extend({
    testCan: function(){
      debugger;
      return true;
    }.property()
  }).create();

  // wipe out contexts so boundIf uses `this` (the permission) as the context
  options.contexts = null;

  Ember.Handlebars.helpers.boundIf.call(permission, "testCan", options)
});

And use it as 

{{#testCan read controller=controller}}
    <h1>It's works</h1>
{{/testCan}}

I do this to test pattern from here http://livsey.org/blog/2012/10/16/writing-a-helper-to-check-permissions-in-ember-dot-js/

But it doesn't work ((

What's wrong? Ember version - 1.9.1

P.P.S originally i work with existing code ( see here Ember.handlebars boundIf didn't call calculated property ) But this example i've got on trying reproduce / resolve that problem

Upvotes: 2

Views: 483

Answers (2)

Vasiliy vvscode Vanchuk
Vasiliy vvscode Vanchuk

Reputation: 7159

Related issue https://github.com/emberjs/ember.js/issues/10692

The this context inside of helpers has changed in various versions:

this was the controller in 1.0.0 through 1.8.0 this was the view in 1.9.0 and 1.10.0 this is undefined in 1.11+ My guess is that the context change in 1.9 is causing this error, updating your helper to add the unknownProperty to the controller will fix the issue.

Upvotes: 0

Samsinite
Samsinite

Reputation: 1418

It might be simplest to use an existing add-on if you are trying to check for permissions/authorization. I suggest ember-can or ember-sanctify (I believe sanctify only supports 1.10 and later).

What you are trying to do though might be easier to reason about inside of a component. In practice the only reasons I suggest for creating helpers is to either do simple conversions or to be able to pass an arbitrary number of args. One of the things Ember could improve on, is helping users understand how do more complex stuff inside of a helper.

Example Component:

app/templates/components/test-can.hbs:

{{#boundIf hasPermission}}
  {{yield}}
{{/boundIf

app/components/test-can.js:

import Ember from 'ember';

export default Ember.Component.extend({
  permission: null,
  controller: null,

  hasPermission: function() {
    //implement logic here
  }.property('permission', 'controller')
});

Example use:

{{#test-can permission=read controller=controller}}
  Your Content Here
{{/test-can}}

Not sure what read and controller are in your example, so if those variables are pointing to nothing, this wouldn't do much. Hope this helps.

Update:

So creating a file at app/helpers/test-can.js that looks like the following

export default function(permissionName, options){
  var permission = Ember.Object.extend({
    testCan: function(){
      return true;
    }.property()
  }).create();

  // wipe out contexts so boundIf uses `this` (the permission) as the context
  options.contexts = null;

  return Ember.Handlebars.helpers.boundIf.call(permission, "testCan", options);
}

Doesn't work when testing? The example above of course will always return true thus always yielding the block. 1.9.1 still basically uses the same code for the if helper.

Upvotes: 2

Related Questions