从另一个助手呼叫一个助手

Jeff 发表于 Dev

杰夫

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

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

当然，这是不好的，因为不建议绑定到style-attribute。
因此，我在控制器上创建了一个计算属性，该属性可提供htmlSafe要绑定的字符串，该字符串可以按预期工作。

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

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

 // 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');
        }
    }

});

现在，我想制作第二个辅助程序，以某种方式封装第一个辅助程序，并将所需的“样式”字符串添加到链接中：

// 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+"');");
    }
});

像这样调用第二个助手：

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

我在这里得到的错误是imagelink.imagelink is not a function。
我已经尝试了几种变体，甚至是诸如之类的奇怪的东西imagelink.compute(params, hash)……显然导入助手时我做错了什么，但是我无法解决....？

我试过/查看Ember js在控制器内使用车把助手吗？并从另一个助手中调用一个把手阻止助手，以及其他几个....尚未解决/已过时。

塔姆·巴杰（TameBadger）

我相信您的is not a function错误都与您的导入语法有关：

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

您正在尝试导入不存在的内容，因为imagelink helper被默认导出。因此，您必须使用：

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

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

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'
    }
})

您在这里所做的只是扩展其他帮助程序，使用this._super（）并在新帮助程序中使用该函数的返回值来调用其计算功能。

这是一个旋转的例子。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。