Updating component state at well-defined moments

Design
1

Hi,

I am trying to modularize my application using components. My wish is to have well-defined moments where the component and its internal logic is updated. For example, the component is instantiated as follows:

{{username-field errors=controllers.session.errors}}

and I have logic that should update whenever errors variable has a change:

export default Ember.Component.extend({
  classNameBindings: ['errors:has-error'],
  errors: null,
  error: function() {  return this.get("errors")['username']; }.property("errors"),
});

Here, I expect the error variable to update based on changes in “errors”. I then use {{error}} within the component template. However, this does not work. I also tried printing via console.log() and I never see it getting called.

Checking ember docs, I also tried triggering logic in function() using:

didInsertElement and parentViewDidChange

While these do get called once at the beginning, they only get called once.

Q1: Is there a problem with the property approach, how can I fix this? Q2: What is the best way to trigger component to update? Since we have these instant bindings in handlebars, I would want to trigger additional logic as soon as the value passed to component has changed, or, whenever it gets refreshed, if there is such a point in time.

If I can do this, I can encapsulate logic inside the component that responds to a well defined set of events delivered for the component. I saw similar approach in reactjs and thought I could do it in ember, too.

If there is a way to do it using views I would be interested in that, too.

I am using Ember version 1.7.0

Thanks, Rookie

3

.property("errors") will only only fire a property change when the "errors’object is set to a different object.

if you want to observe changes to properties of objects, you need to watch the specific keys, in your case:

error: function() {  
  return this.get("errors.username"); 
}.property("errors.username")

Which you can also use some of the inbuilt computed macros to do

error: Ember.computed.alias('errors.username')