2016-05-07 16 views
0

Aufruf habe ich eine Vorlage, die ein Hintergrundbild enthält es Elemente gibt:einen Helfer von einem anderen Helfer

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

Das ist natürlich nicht gut ist, wie es um Stil-Attribut Bindung ist veraltet.
Also machte ich eine berechnete Eigenschaft auf meinem Controller, der eine htmlSafe Zeichenfolge zum Binden dient, die wie vorgesehen funktioniert.

Da ich diese benötigen - und Bilder auf einen speziellen Link gebunden - in mehreren Vorlagen I 2 Helfer gemacht, die ich will/versuchte zu kombinieren:

Der erste Helfer funktioniert perfekt in mehreren anderen Vorlagen (erzeugt ein params -string/link zu einer pHP-Datei, die das gewünschte Bild dient)

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

}); 

Nun wollte ich einen zweiten Helfer machen, die irgendwie die erste Helfer kapselt und fügt die benötigten ‚Stil‘ String 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+"');"); 
    } 
}); 

dass seceond Helfer wie dieser Aufruf:

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

Der Fehler, den ich hier imagelink.imagelink is not a function ist zu bekommen.
Ich habe verschiedene Varianten ausprobiert, sogar seltsame Sachen wie imagelink.compute(params, hash), ... Klar mache ich etwas falsch, wenn ich den Helfer importiere, aber ich komme einfach nicht herum, was ....?

Ich habe versucht/angesehen Ember js use handlebars helper inside a controller? und Calling a handlebars block helper from another helper und einige mehr .... nicht lösen/veraltet sind.

Antwort

1

Ich glaube, Ihr is not a function alle Fehler, um Ihre Import Syntax verwandt sind:

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

zu importieren etwas, das, wie der Imagelink Helfer als Standard Sie versuchen, exportiert nicht existiert. So werden Sie verwenden müssen:

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

Aber Sie werden in ein anderes Problem mit Ihrem Code ausführen, so würde ich empfehlen, es zu diesem Wechsel:

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

Was Sie hier machen, erweitert gerade die anderen Helfer, ruft seine Rechenfunktion auf, indem er this._super() verwendet und den Rückgabewert von diesem in Ihrem neuen Helfer verwendet.

Hier ist ein twiddle mit einem Arbeitsbeispiel.

+0

Tahnk Sie! Erstens, um den Fehler zu finden, falsch zu importieren, zweitens, um die großartige Lösung zu finden, den Helfer zu erweitern und _super aufzurufen! Sieht sehr vielversprechend aus! – Jeff