CODEWITHSUNDEEP
javascriptember.js
Quinn Wilson
Quinn Wilson

Reputation: 8261

ember {{input}} helper not working

I can't for the life of me figure out why this won't work. Maybe it's obvious, but I've been staring at it too long.

I want the {{input}} pre-populated with the value of Title, the label gets filled in correctly...

    <ul>
      {{#each}}
        <li>
        {{input type="text" value=Title }}
          <label>{{Title}}</label>
        </li>
      {{/each}}
    </ul>

here's a Gist

Here's the javascript:

window.App = Ember.Application.create({
  LOG_TRANSITIONS: true
});

App.ApplicationAdapter = DS.FixtureAdapter.extend();

App.Router.map(function () {
    this.resource('Kids', { path: '/' });
});

App.KidsRoute = Ember.Route.extend({
    model: function () {
        return this.store.find('Kid');
    }
});

App.Kid = DS.Model.extend({
    Title: DS.attr('string'),
    Age: DS.attr('number')
});

App.Kid.FIXTURES = [    
  {        
    id: 0,        
    Age: 5,        
    Title: "Joe"    
  },    
  {        
    id: 1,        
    Age: 9,        
    Title: "Max"    
  }
];

Upvotes: 0

Views: 210

Answers (1)

mavilein
mavilein

Reputation: 11668

There seems to be a little bug with {{input}}. The problem was that title is capitalized. I got it to work in this bin. I would recommend to start your attribute names always with a small letter. This is some kind of convention. Most often you will encounter this style opposed to yours.

These are the changes i made to get it to work:

1 - add an alias to title, which is not capitalized:

App.Kid = DS.Model.extend({
    Title: DS.attr('string'),
    Age: DS.attr('number'),
    title : Ember.computed.alias("Title")
});

2 - use the uncapitalited version with the helper:

{{input type="text" value=title }}

Upvotes: 1

Related Questions