Assigning value to a model in a handlebars template

Question

I'm following this tutorial and any time it references an input element it defines them as so:

{{input type="text action='actionname'... }}

I'm told this is out of date and indeed the docs don't use that format , instead using this format:

<input type="text" {{action 'actionname' ... }}

I'm at the point of the tutorial where I'm saving data to the store. I've amended the tutorial to use angle brackets instead of curly braces like so:

<input type="text" value={{model.name}} class="form-control" placeholder="The name of the Library" />
<input type="text" value={{model.address}} class="form-control" placeholder="The address of the Library" />
<input type="text" value={{model.phone}} class="form-control" placeholder="The phone number of the Library" />
<button type="submit" class="btn btn-default" {{action 'saveLibrary' model}}>Add to library list</button>

My route looks like:

import Route from '@ember/routing/route';

export default Route.extend({

  model() {
    return this.store.createRecord('library');
  },

  actions: {
    saveLibrary(newLibrary) {
      newLibrary.save().then(() => this.transitionTo('libraries'));
    },

    willTransition() {
      this.controller.get('model').rollbackAttributes();
    }
  }

});

When I call the route action saveLibrary and open the debugger, newLibrary doesn't have any data from the model properties. Whenever I change the handlebars template to use curly braces like the tutorial, it works fine; newLibrary contains name , address & phone .

What is the syntax for using angle brankets and having it propagate to route.js ?

Answer 1

尖括号组件应为<Input>而不是<input> 。