Input Binding in Ember

I have a form and a live preview of what the form will create.

My model

//campaign.js
export default Model.extend({
  title: attr('string'),
  body: attr('string')
});

In the route

// new.js
export default Ember.Route.extend({
  model () {
    return this.store.createRecord('campaign', {
      title: null,
      body: null
    })
  }
});

My current implementation uses a component for the input

export default Ember.Component.extend({
  keyPress(event) {
    // binding code
  }
});

And in the template

<div id="title-preview"></div>

My Feeling is that there is a cleaner or more idiomatic way to do this. I am new to ember so thank you for any help