Collecting text submitted in input field with ember-rails

Question

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.

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
– Lux, Commented Oct 3, 2016 at 14:12

Lux · Accepted Answer · 2016-10-03 14:10:53Z

1

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

is not valid JS. You want do do

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

answered Oct 3, 2016 at 14:10

Lux

18.3k5 gold badges48 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ember Freak · Accepted Answer · 2016-10-03 14:27:55Z

0

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

answered Oct 3, 2016 at 14:27

Ember Freak

12.9k5 gold badges26 silver badges55 bronze badges

Collectives™ on Stack Overflow

Collecting text submitted in input field with ember-rails

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related