javascript - How to use one-way binding on emberjs? -

i'm starting play around ember 1 thing haven't been able wrap head around how use one-way bindings, consider following code:

html

<script type="text/x-handlebars">     <h1>some app</h1>     <p>         name is: {{name}}     </p>     <form {{action 'updatename' on="submit"}}>         {{view ember.textfield valuebinding="name"}}         <input type="submit" value="save">     </form> </script> 

js

var app = ember.application.create();  app.applicationroute = ember.route.extend({     model: function() {         return {             name: 'john doe'            }     },     events: {         updatename: function() {             console.log('name updated!');            }     } }); 

js fiddle reference

by default ember.textfield's value bound model , viceversa means when type on text model , view updated live, i'm trying bind model textfield (so initial name displayed) update model when form submitted. there easy way it?

thanks in advance.

edit: reference updated fiddle use ember.binding.oneway think end result cleaner @c4p answer: http://jsfiddle.net/x2lmc/3/ i'm not sure if doing $('#user-name').val() field value right way it.

you can use observer, intermediate bound variable on controller, , event handler on controller accomplish want do.

the nameoncontroller property of controller updated when namedidchange() observer fires, making sure nameoncontroller property initialize model's name property , reflect future changes name. bind intermediate property textfield insulate name property immediate typing changes , use event on controller read , set name attribute when button clicked.

template:

{{view ember.textfield valuebinding="nameoncontroller"}} 

js:

app.applicationcontroller = ember.objectcontroller.extend({     nameoncontroller: null,      namedidchange: function() {       var name = this.get('name');       this.set('nameoncontroller', name);      }.observes('name'),      updatename: function() {       var controllername = this.get('nameoncontroller');        this.set('name', controllername);     },      setname: function() {       this.set('name', "new name");     } }); 

update jsfiddle example

you can check changes name property still reflected in text box clicking set new name button.