CODEWITHSUNDEEP
ember.js
MrVinz
MrVinz

Reputation: 874

emberjs refreshing ArrayController with arrangedContent and @each crashes

Hy and thanks for reading :

I have an issue with Ember.ArrayController and arrangedContent. The senario is as follow :

Items inside my arrayController can be modified by some actions. My arrangedContent is filtred on some of those items properties. Thus if an observed item property change the arrangedContent property should be refreshed

I achieve this by setting the property() of my arrangedContent with "[email protected]"

All works fine, except if i try to refresh the model from the route i then get an error message TypeError: Cannot read property 'destroy' of undefined at ContainerView.extend.arrayWillChange

In some case it would work but duplicate the content every time the refresh() is triggered

with some minimal code it may become more clear ... 

App.IndexRoute = Ember.Route.extend({
  model : function(){
  return  [App.Cars.create({color : "red", model : "march"}),
           App.Cars.create({color : "yellow", model : "alto"}),
           App.Cars.create({color : "blue", model : "gundam"}) ];
  },
  actions : {
    reload : function(){
      this.refresh();
    }
  }
});

App.IndexController = Ember.ArrayController.extend({
  arrangedContent  : function(){
    var data= this.get("content");
    data=data.filter(function(elem){
      return elem.get("color").match(new RegExp("el","gi"))!==null;
    });
    return data;
  }.property("lenght","[email protected]"),
  actions : {
    allYell :function(){
      this.get("content").forEach(function(elem){
        elem.set("color","yellow");
      });
    },
    erase : function(){
      if(this.get("length")>0){
        this.get("content").removeAt(0);
      }
    }
  }
});

a JSBin can be found here http://jsbin.com/yebopobetu/3/edit?html,js,console,output

Upvotes: 0

Views: 348

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

I've never seen anyone recommend overriding arrangedContent. I honestly wouldn't recommend it.

App.IndexController = Ember.ArrayController.extend({
  foos  : function(){
    var data= this.get("model");
    return data.filter(function(elem){
      return elem.get("color").match(new RegExp("el","gi"))!==null;
    });
  }.property("@each.color"),
  actions : {
    allYell :function(){
      this.forEach(function(elem){
        elem.set("color","yellow");
      });
    },
    erase : function(){
      if(this.get("length")>0){
        this.removeAt(0);
      }
    }
  }
});

http://jsbin.com/sivugecunu/1/edit

Upvotes: 1

Related Questions