CODEWITHSUNDEEP
ember.js
Jeff
Jeff

Reputation: 6953

calling a helper from another helper

I have a template that includes a background image for it's items:

{{#each model as |item|}}
   <div style="background-image: url('img/backgrounds/{{item.imageBackground}}');">
   {{image.title}}
   </div>
{{/each}}

This of course is no good, as binding to style-attribute is deprecated.
So I made a computed property on my controller that serves a htmlSafe string to bind, which is working as intended.

Since I need this - and images bound to a special link - in several templates I made 2 helpers that I want/tried to combine:

The first helper is working perfectly in several other templates (generates a params-string/link to a php-file that serves the desired image)

 // helpers/imagelink.js
 export default Ember.Helper.extend({
    empty: "img/dummies/blank.png",
    compute(params, hash) {
        if(params[0]) {
           let paramString = 'file='+params[0]+'&itemType='+hash.item+'&type='+hash.type;
           return ENV.ajaxPrefix + ENV.apiNamespace + '/getimage?'+paramString;
        } else {
            // display dummy
            return this.get('empty');
        }
    }

});

Now I wanted to make a second helper that somehow encapsulates the first helper and adds the needed 'style' string to the link:

// helpers/imagebackgoundstyle.js
import Ember from 'ember';
import { imagelink } from 'my-app-name/helpers/imagelink';

export default Ember.Helper.extend({
    compute(params, hash) {
        // ERROR HERE
        let link = imagelink(params, hash);
        return Ember.String.htmlSafe("background-image: url('"+link+"');");
    }
});

calling that seceond helper like this:

<div style={{imagebackgroundstyle workgroup.imageBackground item='workgroup' type='imageBackground'}}>

The error I get here is imagelink.imagelink is not a function.
I've tried several variations, even odd stuff like imagelink.compute(params, hash), ... Clearly I'm doing something wrong when importing the helper, but I just can't get around what....?

I've tried/viewed Ember js use handlebars helper inside a controller? and Calling a handlebars block helper from another helper and several more.... Didn't solve/are outdated.

Upvotes: 1

Views: 1887

Answers (1)

TameBadger
TameBadger

Reputation: 1590

I believe your is not a function errors are all related to your import syntax: 

import { imagelink } from 'my-app-name/helpers/imagelink';

You are trying to import something that doesn't exist, as the imagelink helper is exported as default. So you'll have to use:

import imagelink from 'my-app-name/helpers/imagelink';

But you'll run into another problem with your code, so I would recommend changing it to this:

import Ember from 'ember'

import ImageLink from './image-link'

export default ImageLink.extend({
    compute(params, hash) {
            const val = this._super(params, hash)
      return val + '2'
    }
})

What you're doing here, is just extending the other helpers, calling it's compute function by using this._super(), and using the return value from that in your new helper.

Here is a twiddle with a working example.

Upvotes: 1

Related Questions