Come utilizzare l'associazione unidirezionale su emberjs?

Question

Sto iniziando a giocare con brace, ma una cosa che non sono stati in grado di avvolgere la mia testa intorno è come usare attacchi a senso unico, si consideri il seguente codice:

HTML

<script type="text/x-handlebars"> 
    <h1>Some App</h1> 
    <p> 
     My 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 for reference

Per impostazione predefinita il valore di Ember.TextField sarà associato al mio modello e viceversa il che significa che quando digito sul testo il modello e la vista saranno aggiornati dal vivo, tuttavia quello che sto cercando di fare è associare il modello al campo di testo (quindi verrà visualizzato il nome iniziale), ma aggiornare il modello solo quando il modulo viene inviato. C'è un modo semplice per farlo?

Grazie in anticipo.

EDIT: Solo per riferimento ho aggiornato il mio violino da usare Ember.Binding.oneWay penso che il risultato finale è più pulita rispetto @ C4P rispondere: http://jsfiddle.net/X2LmC/3/ però non sono sicuro se facendo $('#user-name').val() per ottenere il valore del campo è il modo giusto per fallo.

Answer 1

È possibile utilizzare un osservatore, una variabile vincolata intermedia sul controller e un gestore di eventi sul controller per eseguire ciò che si desidera eseguire.

La nameOnController di proprietà del controller verrà aggiornato quando i fuochi nameDidChange() osservatori, facendo in modo che la proprietà nameOnController inizializza alla proprietà del modello name e tener conto di eventuali modifiche future name. Associare questa proprietà intermedia allo TextField per isolare la proprietà name da modifiche di digitazione immediata e utilizzare un evento sul controller per leggere e impostare l'attributo name solo quando si fa clic sul pulsante.

modello:

{{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

è possibile verificare che le modifiche alla proprietà name si riflettono ancora nella casella di testo facendo clic sul pulsante Set New Name.

Answer 2

Ecco una soluzione aggiornata.

Avevo un problema simile, che avevo bisogno di un collegamento unidirezionale, ma su qualche azione avevo bisogno dell'ultimo valore. Avevo anche bisogno del valore attuale modificato. Qui di seguito è la mia prova di concetto -

http://emberjs.jsbin.com/nocadubixi/edit?html,js,output

Manubrio:

<h1>Some App</h1> 
    <p>My Name is: {{model.name}}</p> 
    <p>current value: {{currentName}}</p> 

    {{one-way-field id="user-name" source=model.name action='handleNameChange'}} 
    <button {{action 'updateName'}}>Save</button> 

JS:

App = Ember.Application.create(); 

App.ApplicationController = Em.Controller.extend({ 
    model: { 
     name: 'John Doe' 
    }, 
    actions: { 
     updateName: function() { 
     this.set('model.name', this.get('currentName')); 
     }, 
     handleNameChange: function(newValue) { 
     this.set('currentName', newValue); 
     }, 

    } 
}); 


App.OneWayFieldComponent = Ember.TextField.extend({ 
    valueBinding: Ember.Binding.oneWay('source'), 
    onValueChange: function() { 
    this.sendAction('action', this.get('value')); 
    }.observes('value'), 
});