Wie man eine Einwegbindung auf emberjs verwendet?

Question

Ich fange mit Ember zu spielen, um aber eine Sache, die ich nicht in der Lage, meinen Kopf um zu wickeln ist, wie Einweg-Bindungen verwenden, sollten Sie den folgenden Code:

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

Standardmäßig wird der Wert von Ember.TextField an mein Modell gebunden und umgekehrt, was bedeutet, dass wenn ich den Text eintippe, das Modell und die Ansicht live aktualisiert werden, was ich versuche, das Modell an das Textfeld zu binden (Der ursprüngliche Name wird angezeigt.) Aktualisieren Sie das Modell jedoch nur, wenn das Formular gesendet wird. Gibt es einen einfachen Weg, es zu tun?

Vielen Dank im Voraus.

EDIT: Gerade als Referenz ich meine Geige aktualisiert Ember.Binding.oneWay zu verwenden, ich denke, das Ergebnis ist sauberer als @ beantworten C4P: http://jsfiddle.net/X2LmC/3/ aber ich bin nicht sicher, ob $('#user-name').val() tut das Feld Wert zu erhalten ist der richtige Weg zu TU es.

Answer 1

Sie können einen Observer, eine zwischengelagerte Variable auf dem Controller und einen Event-Handler auf dem Controller verwenden, um das auszuführen, was Sie tun möchten.

Die nameOnController Eigenschaft des Controllers aktualisiert werden, wenn die nameDidChange() Beobachter Feuer, darauf achten, dass die nameOnController Eigenschaft auf die name Eigenschaft des Modells initialisiert wird und alle zukünftigen Änderungen an name reflektieren. Binden Sie diese Zwischeneigenschaft an TextField, um die name-Eigenschaft von sofortigen Eingabeänderungen zu isolieren, und verwenden Sie ein Ereignis auf dem Controller, um das Attribut name nur zu lesen und festzulegen, wenn auf die Schaltfläche geklickt wird.

Vorlage:

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

können Sie prüfen, ob Änderungen an der name Eigenschaft noch in das Textfeld reflektiert werden durch die Set New Name Schaltfläche klicken.

Answer 2

Heres eine aktualisierte Lösung.

Ich hatte ein ähnliches Problem, dass ich eine einseitige Bindung brauchte, aber nach einer Aktion brauchte ich den neuesten Wert. Ich brauchte auch den aktuell editierten Wert. Unten ist mein proof of concept -

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

Lenker:

<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'), 
});