0

I am using Ember-CLI (0.2.0) recently and am testing a simple Helper built from the generator.

The Helper does its job but the problem is that the variable used is not bounded and when its value changes not reflected in the UI.

The helper is a get property to which you pass a property name (that is variable and can take any of the names of the item) and an object and returns the value of that property, this the code:

// unbounded-get-property.js
import Ember from 'ember';

export function unboundedGetProperty(params) {
   var data = params[0];
   var name = params[1];
   return data.get(name);
}

export default Ember.HTMLBars.makeBoundHelper(unboundedGetProperty);

And this is the use

//some hbs
{{#each item in filteredList}}
   {{unbounded-get-property item propertyName}}
{{/each}}

This same fact with a component is easy to do:

//bounded-get-property
import Ember from 'ember';
import layout from '../templates/components/bound-get-property';

export default Ember.Component.extend({
    layout: layout,

    valueDefinition: function() {
       Ember.defineProperty(this, 'value', Ember.computed.alias('item.' + this.get('propertyName')));
    }.on('init')
});

//bounded-get-property.hbs
{{value}}

//some hbs
{{#each item in filteredList}}
    {{bounded-get-property item=item propertyName=propertyName}}
{{/each}}

The question is, we have to create a component like this if we need bound the property?? can't be resolv with a helper?? I hope someone can give me some direction where investigate or learn.

Note:

  • filteredList is a filtered version of the model which is setted in route via ember-data find method
  • propertyName is the name of the property of the item object, its value can be variable.

Thanks in advance

Julio Lorenzo
  • 1
  • 3

1 Answers1

0

Why do you pass property name and model? Try this:

import Ember from 'ember';

export default Ember.HTMLBars.makeBoundHelper(function (ctx) {
    return Ember.String.capitalize(ctx[0]);
});

And template:

{{get-property model.name}}

And the best solution :-)

{{#each item in filteredList}}
   {{item.propertyName}}
{{/each}}
Nick V
  • 1,591
  • 1
  • 11
  • 7