How to re-render after modifying the model data?

Hi, there. I’m confused with this situation: how to change the model data and show the new model smoothly?

I wrote some prototype codes. Here is the code: JS Bin - Collaborative JavaScript Debugging

The result is strange. As you can see, when the addItem functions is triggered, the model data can be modified successfully, according to the console output. However, this change cannot be shown in the web page, just like nothing happened.

Has anyone met this before?

I think you need to call addObject instead of push to get it to work.

Thanks a lot. I changed from array.push() to array.addObject(), and it really works!

Thanks again!

Why should I need to follow this approach? Am I wrong or Ember should update all elements bound to a model, automatically?

As I understand it, it’s a way for ember to observe array changes. I’m guessing because there is no elegant way to observe changes when push is used.

push() is a native JS array method. As the ember guys didnt want to override native methods, they extended the array with the addObject() method, so they could implement their own logic. At least thats what I think.