I have 2 different controllers in my application. The first one, KeywordsIndexController, is defined as follows:
App.KeywordsIndexController = Em.ArrayController.extend({
contentBinding: "App.Keyword.FIXTURES"
});
The second controller, KeywordsNewController, is simply an empty arraycontroller:
App.KeywordsNewController = Em.Controller.extend({
});
There are also 2 views, KeywordsIndexView and KeywordsNewView, each with their own specific functions. KeywordsIndexController handles the task of displaying and deleting keywords, while KeywordsNewController takes care of adding a new keyword and then navigating back to the list of keywords (index). Here is how they are implemented:
App.KeywordsIndexView = Em.View.extend({
templateName: 'templates/keywords/index',
delKeyword: function(e){
var obj = App.Keyword.FIXTURES.findProperty("name", e._data.attributes.name);
App.Keyword.FIXTURES.removeObject(obj);
}
});
----------------------------------------
App.KeywordsNewView = Em.View.extend({
templateName: 'templates/keywords/new',
addKeyword: function(){
App.Keyword.FIXTURES.pushObject({
id: App.Keyword.length,
name: newKey.value,
scode: '55678',
campaign: null
});
this.get('controller.target.router').transitionTo('keywords.index');
}
});
THE ISSUE
Although these events work fine individually, there is a problem when trying to add a new keyword after visiting the list page first. This results in errors such as:
Uncaught TypeError: Cannot call method 'hasOwnProperty' of undefined
Uncaught TypeError: Cannot read property 'name' of undefined
Furthermore, when attempting to print out the App.Keyword.FIXTURES array, it appears to be empty.
I am uncertain about what could be causing this issue and would greatly appreciate any thoughts or assistance.
EXTRA CREDIT
In a testing environment like FIXTURES, is there a more efficient way to reference that object instead of using "App.Keyword.FIXTURES"?
Thanks!