Collecting text submitted in input field with ember-rails

0
votes

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.

2
javascriptruby-on-railsember.js
This is not actually the answer but your tutorial seems very outdated. Consider using a current version of ember, and use ember-cli for your ember project. This is especially a good idea if you are new to ember. – Lux

2 Answers

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

is not valid JS. You want do do

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

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