Can't load form to create new instance of model

Question

router.js has

Router.map(function() {
  this.route('concepts');
  this.route('create-concept', { path: '/concepts/new' });
  this.route('concept', { path: '/concepts/:id' });
});

controllers/create-concept.js has

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    create: function() {
      var concept = this.store.createRecord('concept', {
        description: this.get('description').trim()
      });
      this.set('description', '');
      concept.save();
    }
  }
});

templates/create-concept.js has

{{textarea value="description"}}

{{action 'create'}}

routes/create-concept.js is just the default

import Ember from 'ember';

export default Ember.Route.extend({
});

When I go to the URL /concepts/new in my browser, however, I just get the error

Uncaught TypeError: Cannot read property 'getAttribute' of undefined

in my browser. I have no idea what the cause of this generic error would be, and documentation on this seems to be pretty sparse...

EDIT -- when I am visiting /concepts and click on a link to /concepts/new, it shows

Preparing to transition from 'concepts' to ' create-concept'
Transitioned into 'create-concept'

so it would appear that it does find the correct route

Since it's hard to copy and paste this for some reason, here's a screenshot of part of the stack trace:

EDIT 2 -- Minimal code demonstrating problem

Answer 1

I don't think you really want value="description", you probably mean value=description

One assigns the literal string description to the value property, the other binds the property description to the value property.

Your action needs to actually be attached to something! A div, button, anchor tag.

<div {{action 'create'}}>blah</div>

<button {{action 'create'}}>blah</button>

http://guides.emberjs.com/v1.10.0/templates/actions/