CODEWITHSUNDEEP
ember.jsember-data
InTooDeep
InTooDeep

Reputation: 588

Checking for model update in Computed Property

I'm creating a component for rendering tables. The component is actually a set of nested components and receives a route model and config object, at the top level, then is processed within the component and passed on / iterated over in the next etc.

The final child component receives a model (representing just one row in the table) along with field name that defines which filed to display from the model.

All of this works perfectly and UI updates are bound to the model. The problem that I have is that model updates are not being pushed to the UI. Within my child component I bind to the UI element using the following:

tdVal : function(){

    return this.get('data').get(this.get('details').get('field'));

}.property()

tdValUpdated : function(){

    this.get('data').set(this.get('details').get('field'),this.get('val'));

}.property('tdVal'),

As you can see there is no computed property literal set for tdVal, which is why model updates are not being pushed to the UI. If I were to give this a literal value such as 'data.status' then status updates to the model are pushed to the UI.

What literal value can I use to compute on any attribute change in the model?

I've tried 'data.isUpdated', 'data.isSaving' etc. I can't use 'data.[]' as the single model, not an array of model.

Upvotes: 0

Views: 183

Answers (1)

InTooDeep
InTooDeep

Reputation: 588

OK, after much trial and error I think I've found a workaround for this. It's messy and I'm not very happy with it:

//as previous I render the the appropriate value from the model as defined 
//by the passed in config object
tdVal : function(){

    return this.get('data').get(this.get('details').get('field'));

}.property(),


//then detect UI changes and push to model if required
tdValUpdated : function(){

    this.get('data').set(this.get('details').get('field'),this.get('val'));

}.property('tdVal'),


//Then I observe any changes to model isSaving and directly set tdVal with
//the value of the field for the current td
generalUpdateCatch: function() {

    this.set('tdVal',this.get('data').get(this.get('details').get('field')));

}.observes('data.isSaving'),

I did try the following instead:

tdVal : function(){

    return this.get('data').get(this.get('details').get('field'));

}.observes('data.isSaving'),

But get the error: 'Uncaught TypeError: unsupported content', no idea why? If anybody has a better solution then please post as I very much dislike these workarounds.

Upvotes: 0

Related Questions