Dynamic Property Binding in Template?


I would like to create a component that takes an object as an argument and the path to the relevant property. Then, inside the component I could us this object.property combination to render my object. For example:

Your <b>{{object.dynamicProperty}}</b> property

Then i would call it like…

{{make-bold object=person dynamicProperty="firstName"}}

Where ‘person’ is a simple hash:

Person p = Ember.Object.create({ firstName: 'Andrew', lastName: 'Schoewe'});

Later on I might change my mind and want to make the last name bold. Without having to change my component, I could simply change the arguments passed to the component. Like so:

{{make-bold object=person dynamicProperty="lastName"}}

Thoughts on how I can do this? I’m looking for handlebar feature that allows a dynamic path for binding.


You could manually create a binding on when in a setter or observer for dynamicProperty in your make-bold component. It looks like ember select is doing something sort of similar https://github.com/emberjs/ember.js/blob/v1.12.0/packages/ember-views/lib/views/select.js#L64


This might help you: https://github.com/jmurphyau/ember-get-helper

With this addon, your template would be:

Your <b>{{get object dynamicProperty}}</b> property


Make-bold should be a bound helper. The dynamic property portion of this question is what is throwing me off since your example above doesn’t convey the need for a dynamic property. Can you explain your real use-case?


I’d like to implement a fast select-input that works well under the new glimmer engine. I was going to do this with a custom component. The path to the value and label of the select options is the dynamic part. I’m also struggling with how to make the component arguments use one way binding. Unfortunately angle-bracket components with one-way binding is a few releases away.



As you’ll see below, I’m interested in the ‘select’ element. Looking through your other recent posts, I see you recommend the open-source x-select component. I’ll give it a shot -no sense in remaking it myself. I just hope x-select is fast!


You don’t have to make them one way, though I’m not arguing it’s a bad idea to do so. You can use mut to indicate a two way binding it’s explicitly mentioned for inputs in the 2.0 RFC ( search mut ).


Right… I’m aware of the ‘mut’ keyword to indicate two-way binding. But is there a way in a handlebars template to indicate a one-way binding? I only know how to do one-way bindings in the Javascript ‘backend’ of the component… but I’m not sure how that would work with component arguments.


Ah I see what you’re getting at, no I don’t believe there is currently a way to have those component bindings be one way in the template layer. As you mentioned you would probably need to do computed.oneWay() in the javascript layer.


That is pretty much what the unbound helper is today and can be used as a subexpression.


@jasonmit, it was my impression that unbound is more “one time” as opposed to “one way” since after it is rendered no direction is bound ie if you change the data in either direction the view will not be updated.


Partially yes. By passing it as a subexpression you’re now essentially passing the literal. Therefor it will behave “one-way” upwards but is still mutable downward.

Example of this: http://jsbin.com/yogubalahi/1/edit?html,js,output


Yeah, I would say use one of the 20 or so select components out there: http://www.emberaddons.com/?query=select and contribute back to the one you like the most :smile: The power of OSS!


Forgive me if I’m misunderstanding but doesn’t mutable downward mean that changing the value of name in the parent component should change the value of name in the child component which this doesn’t seem to http://jsbin.com/yogowigavi/1/edit?html,js,output.


Downward from the point of the unbound. I guess I misunderstood the original question?


Will do. You seem pretty knowledgable about this stuff. Do you have any idea which one of these add-ons is the fastest select input? The component design of emberx-select appeals to me but performance concerns me. I have a lot of selects to display on one screen.


For others looking still for answer: the {{get…}} helper is included since 2.1, see emberjs.com