Vincule los manillares al objeto de la aplicación en ember.js

P: ¿Cómo vinculo los manillares a una variable de objeto de aplicación, de modo que cuando esa variable se actualice, los datos del manillar en la pantalla también se actualicen?

jsfiddle: http://jsfiddle.net/kQuVG/3/

Manillar:

<script type="text/x-handlebars">
    {{App.Player.stats.basic}} Scrap
</script>
<button>Add Scrap</button>

JavaScript:

App.Player = Em.Object.create({
    stats:{
        basic: 10,
        premium: 20
    }
});    

$('button').click(function(){
    console.log(App.Player.stats.basic);
    App.Player.stats.basic += 10;
    console.log(App.Player.stats.basic);
});

El violín ni siquiera funciona, lo que me gustaría hacer es hacer clic en el botón y agregar 10 al valor de App.Player.stats.scrap, y que eso se refleje en el panel de salida. ¿Es esta la forma correcta de hacer esto?

Gracias de antemano.

G

preguntado el 03 de mayo de 12 a las 17:05

2 Respuestas

Hay bastantes cosas mal con el violín. Siempre debe usar los accesores universales de Ember al configurar y obtener propiedades en cualquier objeto (incluso propiedades únicas y "aplicación/espacio de nombres global"). Ember también tiene convenciones de nomenclatura específicas, como no usar letras mayúsculas para iniciar instancias de objetos ('personas', no 'Personas'). Y probablemente también debería usar la interfaz objetivo/acción.

He creado un violín con estos cambios. http://jsfiddle.net/ud3323/Ac2hs/

Manillar:

<script type="text/x-handlebars">
  {{App.playerObj.stats.basic}} Scrap <br />
  <button {{action "click" target="App.playerController"}}>Add Scrap</button>
</script>​

JavaScript:

var get = Ember.get, getPath = Ember.getPath, set = Ember.set, setPath = Ember.setPath;

App = Ember.Application.create();

set(App, 'playerObj', Object.create({
    stats:Ember.Object.create({
        basic: 10,
        premium: 20
    })
}));

set(App, 'playerController', Ember.Object.create({
    click: function(view) {
        getPath(App, 'playerObj.stats').incrementProperty('basic', 10);
    }
}));

contestado el 03 de mayo de 12 a las 18:05

Solo una nota: Ember.Button está en desuso, por lo que debe usar el {{action}} ayudante: <input {{action "click" target="App.playerController"}}>Add Scrap</button>, consulte nuestra página, jsfiddle.net/pangratz666/Twg6V - pangratz

Es por eso que amo a la comunidad de Ember. He actualizado mi respuesta. Gracias @pangratz. Yo no estaba al tanto de la depreciación. - roy daniels

Incluso hay una solución más sencilla: getPath(App, 'playerObj.stats').incrementProperty('basic', 10); - pangratz

Bueno, hola amigo olvidado incrementProperty... :) - roy daniels

¿Puedo decir un gran "gracias" a todos? He estado buscando una librería javascript de estilo MVC, y después de la respuesta que recibí de la comunidad, definitivamente me quedaré con Ember. - Caramba

Debe usar un setter y no asignar valores directamente. He actualizado el violín con algo que funciona.

http://jsfiddle.net/kQuVG/4/

Manillar:

<script type="text/x-handlebars">
    {{App.Player.stats.basic}} Scrap
</script>
<button>Add Scrap</button>

JavaScript:

App.Player = Em.Object.create({
    stats:{
        basic: 10,
        premium: 20
    }
});    

$('button').click(function(){
    console.log(App.Player.stats.basic);
    App.Player.setPath('stats.basic',  App.Player.getPath('stats.basic') + 10);
    console.log(App.Player.stats.basic);
});

contestado el 03 de mayo de 12 a las 18:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.