Emberjs + Rails - TypeError: Cannot call method 'hasOwnProperty' of undefined (Unable to POST to Rails DB)

Question

I am trying to POST a new record into Rails db with Emberjs and ember-data; however I am getting the following error:

TypeError {} "Cannot call method 'hasOwnProperty' of undefined"

I have been following the example of https://github.com/dgeb/ember_data_example and tried to build my own app using the same concept as per the example. Not to mention, I have used the debugger; within my controller and when I hit this.get('preLoadedData') in the console, it manage to fetch my input into the form. However, the issue is that I cannot POST the user input into Rails DB.

The codes are:

Store

DS.RESTAdapter.configure("plurals", {"company_category": "company_categories"});
  App.Adapter = DS.RESTAdapter.extend({
    bulkCommit: false
});

App.Store = DS.Store.extend({
  revision: 12,
  adapter: DS.RESTAdapter.create()
});

Model

App.CompanyCategory = DS.Model.extend({
    category:   DS.attr("string")
});

Controller

App.CompanyCategoriesNewController = Em.ObjectController.extend({

    startEditing: function() {
        this.transaction = this.get('store').transaction();
        this.set('model', this.transaction.createRecord(App.CompanyCategory, {}));
    },

    save: function() {
        this.transaction.commit();
        this.transaction = null;
    }
});

Under rails controller:-

def create
    @category = CompanyCategory.new(params[:id])
    respond_to do |format|
      if @category.save
        format.json { render json: @category, status: :created, location: @category }
      else
        format.json { render json: @category.errors, status: :unprocessable_entity}
      end
    end
  end

Router

App.CompanyCategoriesNewRoute = Em.Route.extend({
   model: function() {
       return null;
   },

   setupController: function(controller) {
       this._super.apply(this,arguments);
       controller.startEditing();
   }
});

And my JSON output when I called App.CompanyCategory.find(); is:

{
   "company_categories":[
           {"id":1,"category":"Financial Services"},
           {"id":2,"category":"Trade Services"}
   ]
}

May I know what have I been doing wrong? Thanks in advance!

Answer 1

A couple of things here, it is considered bad practice to have controller set its own model. Instead, its the job of the router to provide a model to the controller. So according to the ember way of doing things, you should be doing:

App.CompanyCategoriesNewRoute = Em.Route.extend({
   model: function() {
    return this.get('store').createRecord(App.CompanyCategory, {});
   },

  setupController: function(controller, model) {
    controller.set('content', model);
  }
});

App.CompanyCategoriesNewController = Em.ObjectController.extend({


    startEditing: function() {
       this.set('transaction', this.get('store').transaction());
       this.get('transaction').add(this.get('model'));
   },

   save: function() {
     this.get('transaction').commit();
  }

});