Ayudante del manillar dentro de {{#each}}

Question

Intento llamar a un ayudante de manillar registrado dentro de un bucle {{#each}}. Desafortunadamente Ember.js se queja porque intenta resolver el helper como una propiedad del controlador en lugar de un helper.

Handlebars.registerHelper('testHelper', function(name) { 
    return 'foo: ' + name 
}); 

(denominación y contenido son sólo valores ficticios para mostrar el ejemplo)

{{#each entry in App.testController}} 
    <div>{{{testHelper entry.name}}}</div> 
{{/each}} 

El error que las impresiones Ember.js es:

Uncaught Error: Handlebars error: Could not find property 'testHelper' on object <App.testController:ember254>. 

¿Cómo tengo que llamar el ayudante registrado para que se reconozca?

Answer 1

Tienes que correr, ya sea con this solution,

Javascript plantilla

Handlebars.registerHelper('testHelper', function(property, options) { 
    return 'foo: ' + Ember.get(options.data.view.content, property); 
}); 

Manillar

<script type="text/x-handlebars" data-template-name='app-view'> 
    <ul> 
    {{#each entry in content}} 
    <li>{{testHelper name}}</li> 
    {{/each}} 
    </ul> 
</script>​ 

O mejor aún, con éste:

Javascript plantilla

Handlebars.registerHelper('testHelper', function(property) { 
    return 'foo: ' + Ember.get(this, property); 
}); 

Manillar

<script type="text/x-handlebars" data-template-name='app-view'> 
    <ul> 
    {{#each entry in content}} 
    {{#with entry}} 
     <li>{{testHelper name}}</li> 
    {{/with}} 
    {{/each}} 
    </ul> 
</script>​ 

Answer 2

Mis ayudantes se escriben en archivos individuales, así que modifican la respuesta de @ MikeAski ser el siguiente.

En helpers/my-helper.js:

var MyHelper = function(value) { 
    return moment(value).format("MMMM Do, YYYY"); 
}; 

export 
default MyHelper; 

En la parte superior de app.js:

// import modules 
import myHelper from 'appkit/helpers/my-helper'; 

// register custom helpers 
Ember.Handlebars.registerBoundHelper('myHelper', myHelper); 

Entonces ni siquiera necesita el {{#with}} en el manillar, sólo tiene que utilizar como ayudante normal.

{{#each thing}} 
    {{myHelper thing.foo}} 
{{/each}} 

Answer 3

Si no desea utilizar un ayudante global, entonces se puede utilizar una "consulta pathed":

{{#each entry in App.testController}} 
    <div>{{{../testHelper entry.name}}}</div> 
{{/each}} 

../ es la sintaxis de una consulta pathed. Le hace recorrer el árbol de alcance 1 nivel y acceder a datos privados desde un alcance principal. Para recorrer 2 niveles hacia arriba, puede hacer lo siguiente ../../. Esto es útil si ha anidado bucles for.