Search code examples
ember.jsember-data

ember-data model.save is not a function


i have a page with button "CONFIRM NOW" where upon clicking i am getting it to save across network with an JSON REST adapter.

/accounts/chinboon@gmail.com/verification
/accounts/{email}/verification

But i am getting a "model.save is not a function" error.

Uncaught TypeError: model.save is not a function
    at Class.verifyEmail (index.js:19)
    at Router.triggerEvent (ember.debug.js:28654)
    at trigger (ember.debug.js:55917)
    at Router.trigger (ember.debug.js:57517)
    at Class.send (ember.debug.js:27844)
    at Class.send (ember.debug.js:31852)
    at ember.debug.js:11639
    at Object.flaggedInstrument (ember.debug.js:18475)
    at ember.debug.js:11638
    at Backburner.run (ember.debug.js:717)

templates/accounts/show/verification/index.hbs:

<section class="main-content">
  <div class="container-fluid" style="border:1.0rem solid #fff;">
    <div class="row">
      <div class="col-xs-12 col-sm-7 col-lg-6">
        <form {{action "verifyEmail" on="submit"}}>
          <div class="form-group">
            <h2>Confirm your email now to complete the registration</h2>
          </div>

          <div class="mt10">
            <button type="submit" class="btn btn-success">CONFIRM NOW</button>
          </div>
        </form>
      </div>
    </div>
    <div class="row mt20">
      <div class="col-xs-12 col-sm-7 col-lg-6">
        You are receiving this email because ...
      </div>
    </div>
  </div>
</section>

router.js:

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType,
  rootURL: config.routerRootURL
});

// page route
Router.map(function() {
  this.route('accounts', function() {
    // /accounts/new
    this.route('new', function () {
      //this.route('success');
    });

    this.route('show', { path: '/:account_id' }, function() {
      // /accounts/1/confirmation
      this.route('confirmation');
      // /accounts/1/verification
      this.route('verification', function() {
        // /accounts/1/verification/success
        this.route('success');
      });
    });
  }); 
});

export default Router;

routes/accounts/show/verification/index.js:

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params) {
    return this.store.createRecord('account-verification');
  },

  actions: {
    /* account email verification */
    verifyEmail() {
      var model = this.get('model');

      var self = this;

      <<<<<PROBLEM HERE, "MODEL.SAVE IS NOT A FUCTION">>>>>
      model.save().then(function(data) {
        // handle success
        // route user to success page
      }).catch((adapterError) => {
        console.log(adapterError);
      });
    }
  }
});

models/account-verification.js:

import DS from 'ember-data';

export default DS.Model.extend({
  email: DS.attr('string'),
  secretToken: DS.attr('string')
});

Solution

  • this.get('model') inside Route will return model function not the record you created through model method. so either you need to move this action to corresponding controller or use controllerFor and get the model from controller.

    Move actions to controllers/accounts/show/verification/index.js file.

    import Ember from 'ember';
    export default Ember.Controller.extend({
        actions: {
            /* account email verification */
            verifyEmail() {
                var model = this.get('model');
                var self = this;
                model.save().then(function(data) {
                    // handle success
                    // route user to success page
                }).catch((adapterError) => {
                    console.log(adapterError);
                });
            }
        }
    });