Computed property failing to update and failing to remove item from array


This jsbin has two problems. To use it, click “collection”, then first (on the right hand side) create a “gene”. “1 1 1” are good entries for the three text boxes. Then click the “add to snake” button. The phrase “Morph: Normal” should change to “Morph: Computed Morph” (real code to be added later). What confuses me is the count changes (Locus count) but not the analysis of the contained genes in the array newSnakeGenes.

Second, try to delete the gene you created with the “X” button, the code runs but the gene does not leave the array (at least as far as I can tell)?



You either need to observe model.newSnakeGenes.[] or model.newSnakeGenes.length, because it is the property your property depends on.


So the .property(‘model.newSnakeGenes’) is an observer? In learning Ember I assumed that, that syntax was saying the computed property depends on this property that is listed. Seems weird to have to say “.[]” as newSnakeGenes is the array we are observing, not an array it contains (dereferenced by the “dot”).

But despite how weird that is thank you for pointing me in the right direction. I must also say, this post helped as I read it while writing my own and the .[] threw me then but stuck in my brain as weird. When you said I had to observe that I remembered that post.

Still trying to solve the delete from array problem (#2).


What I meant is that you need to use property('model.newSnakeGenes.[]'). You need to append ‘.[]’ when you to be notified when “the membership of an array changes” (as seen in the Ember.Array documentation.

About your second problem, just change destroyGene to set genes as follows:

var genes = this.get('model.newSnakeGenes');

Your problem was that you were removing the gene from a different array.


but, yeah… That one I should have seen myself…

Thank you for the jsbins too!