CODEWITHSUNDEEP
javascriptember.js
arturgrigor
arturgrigor

Reputation: 9441

Ember.js bindings not firing changes

I have an container object that holds 3 items. Each of that item has some text fields (eg: text1, text2, text3, text4). Besides that I also have a computed property that returns the current item based on a property called currentItemIndex.

So, basically, this is the 'item model':

App.Item = Ember.Object.extend({
    text1: null,
    text2: null,
    text3: null,
    text4: null
});

This is the computed property

App.currentItemIndex = 0;
App.currentItem = function () {
    return App.containerObject[App.get('currentItemIndex')];
}.property('App.currentItemIndex');

And a mock datasource could look like this:

App.containerObject.pushObject(App.Item.create({text1:'Text 1', text2:'Text 2', text3:'Text 3', text4:'Text 4'}));
App.containerObject.pushObject(App.Item.create({text1:'Text 1', text2:'Text 2', text3:'Text 3', text4:'Text 4'}));
App.containerObject.pushObject(App.Item.create({text1:'Text 1', text2:'Text 2', text3:'Text 3', text4:'Text 4'}));

So, as you can see each item has the same text values and when I'm changing App.currentItemIndex to any value 0, 1 or 2 the binding won't trigger the notification that something has changed., because of course the properties did not changed but the object is a new one.

So the question is: How can I force to trigger this notification to update the views accordingly?

Upvotes: 1

Views: 384

Answers (2)

arturgrigor
arturgrigor

Reputation: 9441

Fiddle: here

The problem was caused by the removeClass('btn-success btn-danger') call. This is weird because on jQuery Docs it says that you can remove multiple classes at a time.

So, if I just use removeClass('btn-success') or removeClass('btn-danger') then everything works fine.

Upvotes: 0

sly7_7
sly7_7

Reputation: 12011

I wonder how do you change the value of App.currentItemIndex. You have to use the set method here, like:

 App.set('currentItemIndex', 1)

Note that you can use App.containerObject.objectAt(App.get('currentItemIndex')) instead of accessing App.containerObject[App.get('currentItemIndex')]

EDIT: Here is a working jsfiddle: http://jsfiddle.net/Sly7/c4bA2/69/

I'm always using the get/set to access properties, and declare them inside the application.

Upvotes: 2

Related Questions