Component Binding Shortcut


#1

We have a search bar component which we use in a few places in our application, it looks a little like this:

{{search-bar searchQuery=searchQuery}}

As you can see we repeat ourselves when setting the bound searchQuery computed property. Perhaps with components it might be possible to dry this up a little?

When doing {{component-name propertyName}} this could be rewritten as the above when the property name matches a computed property on the component. The downside of this is that it could be quite brittle as it means you have to name things the same across your controller and/or model and the component you are using. Perhaps something like this would be better?

App.SearchBarComponent = Em.Component.extend
  searchQuery: Ember.computed.boundPropertyAt(0)

This would use something similar to an alias cp and take the value bound at a specific index, which is kind of similar to how helpers work.

Thoughts?

Edit:

Another option… since we have other conventions (like model etc…) maybe when a single value is bound to a component without a name it could be mapped to a convention based computed property. So:

{{search-bar searchQuery}}

Would be available as componentData (or something more reasonable) within the component.


#2

I suggested something like this to Yehuda but it was kinda shot down because there’s not really a Web Components equivalent afaik.