No se pueden obtener enlaces de ember para que funcionen según lo documentado

Question

Estoy siguiendo el documentation en emberjs.com, pero no puedo obtener el primer ejemplo de enlaces para que funcione.

Creé jsfiddle para demostrar. ¿Qué me estoy perdiendo?

Answer 1

Ember.js usa el concepto de RunLoop para permitir enlaces, observadores, etc.

El problema con el ejemplo es que al establecer una propiedad (vinculada) e inmediatamente obtener el valor a través de console.log no se desencadena ningún evento que desencadene RunLoop y, por lo tanto, sincronice los cambios. Hay dos publicaciones de blog excelentes sobre RunLoop: Part 1 y Part 2. A pesar de que se dirigen a Sproutcore, el concepto es aproximadamente el mismo para Ember.js.

Hay dos maneras de hacer que su ejemplo funcione.

la sincronización a través de la Fuerza Ember.run.sync()

A medida que el estado de documentos, invocando Ember.run.sync()... es una forma útil para forzar inmediatamente todos los enlaces en la aplicación para sincronizar. Esto deja el código como este, ver http://jsfiddle.net/pangratz666/cwR3P/

App = Ember.Application.create({}); 
App.wife = Ember.Object.create({ 
    householdIncome: 80000 
}); 

App.husband = Ember.Object.create({ 
    householdIncomeBinding: 'App.wife.householdIncome' 
}); 

// force bindings to sync 
Ember.run.sync(); 

console.log(App.husband.get('householdIncome')); // 80000 

// Someone gets raise. 
App.husband.set('householdIncome', 90000); 

// force bindings to sync 
Ember.run.sync(); 

console.log(App.wife.get('householdIncome')); // 90000​ 

---

O la segunda opción es que ...

muestran los valores en una vista

Mostrando las propiedades en una vista maneja todas las cosas de RunLoop para usted, vea http://jsfiddle.net/pangratz666/Ub97S/

Java Guión:

App = Ember.Application.create({}); 
App.wife = Ember.Object.create({ 
    householdIncome: 80000 
}); 

App.husband = Ember.Object.create({ 
    householdIncomeBinding: 'App.wife.householdIncome' 
}); 

// invoke function in 3000ms 
Ember.run.later(function() { 
    // someone gets a raise 
    App.husband.set('householdIncome', 90000); 
}, 3000);​ 

Manillar (la vista):

<script type="text/x-handlebars" > 
    Wifes income: {{App.wife.householdIncome}}<br/> 
    Husbands income: {{App.husband.householdIncome}} 
</script>​ 

Answer 2

Deberá llamar al Ember.run.sync(); después de configurar sus enlaces para que el bucle de ejecución de Ember pueda sincronizarse antes de sus instrucciones de registro. Esta es una técnica útil para probar con Ember también, pero no suele ser necesaria en las propias aplicaciones de Ember.