javascript - route - ember tutorial
Ember sin Ember Data (3)
Los datos de Ember todavía no están en la versión 1.0 y, por lo tanto, decidí usar Ember sin modelos de datos.
Tengo mis propios modelos, y los crea la función de modelo de ruta.
Sin embargo, mantener el estado entre los objetos frontend y los objetos de fondo es una pesadilla. Especialmente cuando una ruta usa otros modelos de rutas.
- ¿Cómo puede lograrse esto, debería escribir mi propio método de búsqueda de tienda y modelo?
- ¿Debería usar Ember Data (aunque no está en la versión 1.0?) ¿Quizás una ETA en Ember Data 1.0?
- escribir código para actualizar los modelos en la interfaz cada vez que cambio un modelo?
- ¿Otro método?
¿Es lo que estoy haciendo las mejores prácticas o debería hacerlo de otra manera? Mi instinto me dice que sin usar Ember Data debería escribir mi propia tienda. Me encantaría recibir comentarios de algunos de ustedes.
Ejemplo de un modelo:
App.Person = Ember.Object.extend(App.Serializable,Em.Copyable,{
user_email : null //used in routing dynamic segements and as old email when making changes to email
,first_name: null
, last_name: null
, fullname : function () {
return this.first_name + '' '' + this.last_name;
}.property(''first_name'',''last_name'').cacheable()
};
App.Person.reopenClass({
createRecord: function(data) {
return App.Person.create({
user_email : data.email
, first_name: data.first_name
, last_name : data.last_name
}});
Ejemplo de cómo cargo los modelos de clase:
App.UsersRoute = App.AuthenticatedRoute.extend( {
model : function () {
return new Ember.RSVP.Promise(function(resolve, reject) {
$.getJSON(''/users'').then(function(usersData) {
var userObjects = [];
usersData.forEach(function (data) {
userObjects.pushObject(App.Person.createRecord(data));
});
resolve( userObjects);
},function(error) {
reject(error);
});
})
},
Las subrutas usan el modelo:
App.UsersAvailableRoute = App.AuthenticatedRoute.extend( {
model : function () {
return {
allUsers : Ember.ArrayController.create({
content : this.modelFor(''users'').filter( function (user) {
return user.availablity === 100
}),
Ejemplo de cómo actualizo el modelo en un controlador:
App.UsersAvailableController = Ember.ArrayController.extend({
needs : [''users'']
,applyPersonAssign : function (person,need,project) {
need.set(''allocated'',person);
var updateObject = Ember.copy(project,true);
if (Ember.isEmpty(need.get(''inProject''))) {
updateObject.projectNeeds.pushObject(need);
}
return $.ajax({
url: ''/projects/'' + updateObject.get(''codename''),
"type": "PUT",
"dataType": "json",
data: updateObject.serialize()
})
Donde trabajo estamos usando Ember Data y Ember CLI a pesar de que son bastante inestables. Hasta ahora, Ember Data no ha causado demasiado dolor y sufrimiento aquí. La tienda es bastante fácil de entender, y la documentación sobre Ember para esa faceta del framework es bastante buena. El único problema que he tenido tiene que ver con ordenar modelos dinámicamente, y cuando modifico el contenido de ellos, se reorganizan de acuerdo con los cambios que hago, y en algún lugar a lo largo del camino pasan cosas realmente extrañas, no estoy seguro si eso es Ember Sin embargo, la culpa de los datos.
En resumen, hemos encontrado cierto éxito con Ember Data, y no podemos quejarnos si esa es la ruta que desea seguir.
Si está familiarizado con Ruby, Rails es una gran solución para back-end.
La comunidad de brasas tiene soporte para los rieles con la gema ember-rails que le permite usar los rieles como un medio para servir JSON.
Empezando
Agregue la gema a su aplicación Gemfile:
gem ''ember-rails'' gem ''ember-source'', ''~> 1.9.0'' # o la versión que necesita
Ejecutar la
bundle installA continuación, genere la estructura de la aplicación:
los rieles generan brasas: bootstrap
Reinicia tu servidor (si se está ejecutando)
Construyendo un nuevo proyecto desde cero
Rails admite la capacidad de crear proyectos a partir de un archivo Ruby fuente de plantilla.
Para construir un proyecto Rails centrado en Rieles, simplemente escriba lo siguiente en su línea de comando:
rails new my_app -m http://emberjs.com/edge_template.rb
Para instalar las últimas compilaciones de datos de brasas y brasas. Cabe señalar que los ejemplos en la guía de introducción se han diseñado para utilizar la versión de Ember liberada:
rails generate ember:install
Entonces todo lo que tienes que hacer es renderizar json en tus controladores, como este
class ProjectsController < ApplicationController
def index
respond_to do |format|
format.json { render json: Project.all }
end
end
def show
respond_to do |format|
format.json { render json: Project.where(name: params[:name])}
end
end
end
asegúrese de actualizar sus serializadores
class ProjectSerializer < ApplicationSerializer
attributes :id, :name, :description, :imgUrl, :deployUrl
end
configura tus rutas
EmberRailsBlog.ProjectsRoute = Ember.Route.extend({
model: function(){
return this.store.find(''project'');
}
});
y finalmente tu modelo
var attr = DS.attr;
EmberRailsBlog.Project = DS.Model.extend({
name: attr(),
description: attr(),
imgUrl: attr(),
deployUrl: attr()
});
No necesariamente es necesario recrear el almacén Ember Data. Ember funciona bien con POJOs, también puedes envolver tus POJOs en un objeto Ember para ofrecerte funciones divertidas.
Dicho esto, crear un adaptador personalizado que almacene los resultados podría ser conveniente.
Aquí hay un ejemplo en el que creo un adaptador que admite el almacenamiento en caché. Puede construir lentamente sobre el concepto para todas las cosas básicas que necesita.
App.FooAdapter = Ember.Object.extend({
cache:{},
find: function(id){
var self = this,
record;
if(record = this.cache[id]){
return Ember.RSVP.cast(record);
}
else
{
return new Ember.RSVP.Promise(function(resolve){
resolve($.getJSON(''http://www.foolandia.com/foooo/'' + id));
}).then(function(result){
record = self.cache[id] = App.Foo.create(result);
return record;
});
}
}
});
En los ejemplos a continuación, utilizo el contenedor para registrar el adaptador en todas mis rutas / controladores, de modo que tuve acceso fácil y perezoso a él.
http://emberjs.jsbin.com/OxIDiVU/742/edit
Si siempre quieres que sea una promesa:
http://emberjs.jsbin.com/OxIDiVU/740/edit
Reusabilidad
El ejemplo anterior puede hacer que parezca que tendrías que hacer un montón de trabajo, pero no olvides que Ember es súper reutilizable, aprovecha la magia.
App.MyRestAdapter = Em.Object.extend({
type: undefined,
find: function(id){
$.getJSON(''http://www.foolandia.com/'' + this.get(''type'') + ''/'' + id
}
});
App.FooAdapter = App.MyRestAdapter.extend({
type: ''foo'' // this would create calls to: http://www.foolandia.com/foo/1
});
App.BarAdapter = App.MyRestAdapter.extend({
type: ''bar'' // this would create calls to: http://www.foolandia.com/bar/1
});
Esta es la idea básica de qué es Ember Data / Ember Model. Han tratado de crear una tonelada de valores predeterminados y han sido geniales, pero a veces es exagerado, especialmente si solo está consumiendo datos y no está haciendo CRUD.
Ejemplo: http://emberjs.jsbin.com/OxIDiVU/744/edit
También puedes leer esto (dice lo mismo):