问题描述
我有一个包含项目背景图片的模板:
{{#每个模型为| 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)
,...
显然,在导入帮助程序时我做错了什么,但我无法解决....?
我尝试过/查看了
,上面有一个有效的示例。
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/viewedEmber js use handlebars helper inside a controller?andCalling a handlebars block helper from another helperand 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.
这篇关于从另一个助手呼叫一个助手的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!