Error: Unable to update Ember Array - Property 'destroy' cannot be read because it is undefined

Question

Error: Unable to update Ember Array - Property 'destroy' cannot be read because it is undefined

Is there a way to efficiently update an Ember Array so that changes in the array reflect in the view?

Take a look at this simplified code snippet -

cacheArr: Em.A([]),
count: 1,
updateFxn: function() {
    this.incrementProperty(count);
    devObj = Ember.object.create();
    Ember.set(devObj,"ts", this.count);
    this.cacheArr.replace(0,1, [devObj]);
},


App.ArrayComponent = Ember.Component.extend({
  refresh: function() {
    return cacheArr;
  }.property('localModel.length')
});

<script type="text/x-handlebars" id="components/new-comp">
      {{#each item in refresh}}
         {{item.ts}}
      {{/each}}
</script>

I'm puzzled by the exception I encountered: Cannot read property 'destroy' of undefined. Despite my efforts, I haven't been able to find a solution. Any suggestions would be greatly appreciated.

javascript ember.js

Answer 1

Answer №1

Ember keeps track of changes and updates items accordingly when the correct methods are used (such as get/set). When working with arrays, it's important to utilize appropriate setters/getters like pushObject/removeObject/replace/objectAt.

App.IndexController = Em.ArrayController.extend({
  cacheArr: Em.A([]),
  count: 1,
  actions:{
    updateFxn: function(item) {
      this.incrementProperty('count');
      var newColor = {
        color:'newColor', 
        count:this.get('count')
      };
      var index = this.indexOf(item);
      this.replace(index, 1, [newColor]);
    }
  }
});

In creating computed properties, it's essential to have them monitor elements that can impact the outcome of the computed property. Let's analyze the following computed property:

refresh: function() {
  return cacheArr;
}.property('localModel.length')

Let's illustrate this with an example:

// Obtain refresh
var refresh = this.get('refresh');

console.log(refresh);

// Modify localModel to make refresh dirty

this.get('localModel').pushObject({foo:'bar'});

var refresh2 = this.get('refresh');

At this point, both refresh and refresh2 would be identical, since the computed property always returns cacheArr (a global property).

Answer 2

Ember keeps track of changes and updates items accordingly when the correct methods are used (such as get/set). When working with arrays, it's important to utilize appropriate setters/getters like pushObject/removeObject/replace/objectAt.

App.IndexController = Em.ArrayController.extend({
  cacheArr: Em.A([]),
  count: 1,
  actions:{
    updateFxn: function(item) {
      this.incrementProperty('count');
      var newColor = {
        color:'newColor', 
        count:this.get('count')
      };
      var index = this.indexOf(item);
      this.replace(index, 1, [newColor]);
    }
  }
});

In creating computed properties, it's essential to have them monitor elements that can impact the outcome of the computed property. Let's analyze the following computed property:

refresh: function() {
  return cacheArr;
}.property('localModel.length')

Let's illustrate this with an example:

// Obtain refresh
var refresh = this.get('refresh');

console.log(refresh);

// Modify localModel to make refresh dirty

this.get('localModel').pushObject({foo:'bar'});

var refresh2 = this.get('refresh');

At this point, both refresh and refresh2 would be identical, since the computed property always returns cacheArr (a global property).

Error: Unable to update Ember Array - Property 'destroy' cannot be read because it is undefined

Answer №1

Similar questions

What are some strategies for optimizing Next.js applications for mobile devices?

Having difficulties retrieving the value of the div in the voting system

Next.js App encounters a missing API route (The requested page is not found)

What is the optimal approach for managing server-side data stored as a JavaScript variable?

Unusual behavior observed with ES5 filter functionality in Node.js

Disabling 'Input Number' feature is ineffective in Firefox browser

Modify a unique custom binding handler in such a way that it is designated using an Immediately Invoked Function Expression

Adding parameters to a URL is a common practice

Looking for a way to go through a set of documents in an array and calculate the sum of a specific property in JSON using the $cond

The functionality of the webservice is not functioning properly

Property that is dynamically populated based on data retrieved from an external API

jQuery: What's the Difference Between Triggering a Click and Calling a Function?

Trouble with JavaScript preventing the opening of a new webpage

MUI React: The Smallest Date Possible

How can you prevent videos from constantly reloading when the same source is used in multiple components or pages?

Unsuccessful attempt at testing RequireJS in a straightforward manner

Struggling to properly test the functionality of my NgForm call in Angular2+

utilizing the JavaScript SDK to send alerts to a user's friends on Facebook

What is the best way to bind the value of total when working with forms and the bind method?

playing with JSON data in angular