从另一个助手呼叫一个助手 [英] calling a helper from another helper

问题描述

我有一个包含项目背景图片的模板：

  {{＃每个模型为| item |} } 
< div style = background-image：url（'img / backgrounds / {{item.imageBackground}}'）;;> 
 {{image.title}} 
< / div> 
 {{/ each}} 
  

这当然不好，因为绑定样式

因此，我在控制器上创建了一个计算属性，该属性提供了一个 htmlSafe 字符串进行绑定，该字符串可以按预期工作。

由于我需要这个-并且图像绑定到一个特殊的链接-在几个模板中，我制作了2个我希望/尝试合并的助手：

第一个帮助程序可以在其他几个模板中正常工作（生成params字符串/链接到提供所需图像的php文件）

  // helpers / imagelink.js 
导出默认Ember.Helper.extend（{
空： img / dummies / blank.png，
计算（参数，哈希）{
 if（params [0]）{
让paramString ='file ='+ params [0] +'& itemType ='+ hash.item +'& type = '+ hash.type; 
返回ENV.ajaxPrefix + ENV.apiNamespace +'/ getimage？'+ paramString; 
} else {
 //显示d美味的
返回this.get（空）; 
} 
} 
 
}）； 
  

现在我想创建第二个帮助器，以某种方式封装第一个帮助器并添加所需的样式链接的字符串：

  // helpers / imagebackgoundstyle.js 
从'ember'导入Ember； 
从 my-app-name / helpers / imagelink中导入{imagelink}； 
 
导出默认值Ember.Helper.extend（{
compute（params，hash）{
 //错误在这里
 let link = imagelink（params，hash）; 
 return Ember.String.htmlSafe（ background-image：url（' + link +'）;）; 
} 
}）; 
  

像这样调用第二个助手：

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

我在这里得到的错误是 imagelink.imagelink不是函数。

我尝试了几种变体，甚至是诸如 imagelink.compute（params，hash），...
显然，在导入帮助程序时我做错了什么，但我无法解决....？

我尝试过/查看了

和

以及其他更多....
尚未解决/已过时。

解决方案

我相信您的不是函数错误都与您的导入语法：

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

您正在尝试导入不存在的内容，因为默认情况下会导出imagelink帮助器。因此，您必须使用：

 从 my-app-name / helpers / imagelink导入图像链接； 
  

但是您的代码会遇到另一个问题，因此建议将其更改为：

 从'ember'导入Ember 
 
从'./image-link'$ b导入ImageLink 
 $ b导出默认ImageLink.extend（{
compute（params，hash）{
 const val = this._super（params，hash）
 return val +'2'
} 
}）
  

您在这里所做的只是扩展其他助手，使用this._super（）并使用新助手中的返回值调用它的计算功能。

这里是旋转，上面有一个有效的示例。

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.

解决方案

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.

这篇关于从另一个助手呼叫一个助手的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！