CODEWITHSUNDEEP
javascriptruby-on-railsember.js
Coder_Nick
Coder_Nick

Reputation: 841

Collecting text submitted in input field with ember-rails

I am following an ember-rails tutorial. It's using coffeescript and I'm writing in javascript. Essentially I have a form that when I submit text on it it should place the text below.

My controller looks like this:

Emberapp.ApplicationController = Ember.Controller.extend({

  entries: [],
  actions: {
    addEntry: function(){
      this.entries.pushObject name: this.get('newEntryName');
      this.set('newEntryName', "");
    }
  }
});

My template looks like this

<div id = "container">
  <h1>Emberails</h1>

  {{ input value=newEntryName enter='addEntry' }}

  <ul>
    {{#each entries}}
      <li>{{name}}</li>
    {{/each}}
  </ul>

</div>

When I reload the page I get an error stating that 'name: this.get('newEntryName');' is an Unexpected identifier. I've been checking for the syntax rules online but I'm not sure if it is a coffeescript to javascript error or something else.

Upvotes: 0

Views: 25

Answers (2)

Ember Freak
Ember Freak

Reputation: 12872

Controller,

Emberapp.ApplicationController = Ember.Controller.extend({
     newEntryName: '',
      entries: [],
      actions: {
        addEntry: function(){
          this.get('entries').pushObject({name: this.get('newEntryName')});
          this.set('newEntryName', "");
        }
      }
    });

in hbs,

<div id = "container">
  <h1>Emberails</h1>

  {{ input value=newEntryName enter='addEntry' }}

  <ul>
    {{#each entries as |value|}}
      <li>{{value.name}}</li>
    {{/each}}
  </ul>

</div>

Like Lux suggested consider ember-cli and read http://guides.emberjs.com

Upvotes: 0

Lux
Lux

Reputation: 18240

this.entries.pushObject name: this.get('newEntryName');`

is not valid JS. You want do do

this.entries.pushObject({name: this.get('newEntryName')});

Upvotes: 1

Related Questions