How to stop event bubbling on editing a view in Ember

Question

I am working on some editable views in Ember, click here to see my jsbin and i have an issue anytime i want to edit a current view. As you can see the problem is that once i click to edit a single view, all the other transactions become editable, i don't want this, i want that only a single item becomes editable, not all of them. I don't know what i am doing wrong, from the other hand if i delete one , it works well.

in My controller this is the function:

edit:function(ob){
    this.map(function(item,index){
        if(ob.id===item.id)
            Em.set(item,'editable',true);
        });
    },

Answer 1

I think your problem is stemming from the fact that there is no .id property on your objects you're trying to compare.

Try this...

this.forEach(function(item) {
    if (ob === item) {
      Em.set(item, 'editable', true);
    }
  });

Although I did notice in your code, you are adding another edit input when you add an item to the list, and there is some binding going on. But this should answer your question as to setting edit for each individual item.

The reason your function is setting all of the items to editable, is because ob.id === item.id, since they both don't exist, it's a truthy statement...hence all items get set to editable = true.

Happy hunting!