javascript - traduccion - ember.js: cuál es el patrón correcto de controlador/vista para crear un nuevo modelo

ember.js ventajas y desventajas

Question

Tengo una aplicación que en este momento contiene una vista de objetos del mismo modelo. Se recuperan del servidor, se envían en bucle y se agregan al controlador de la lista mediante un método de agregar

<script>
App.Controllers.List = Em.ArrayProxy.create({
  content: Ember.A([]),
  add: function(obj){
    this.pushObject(obj);
  }
});
</script>

Ahora estoy trabajando en una parte donde el usuario crea un nuevo objeto que (después de pasar la validación) se agregará a la lista y también se enviará al servidor.

No puedo encontrar ningún ejemplo sobre el mejor patrón a seguir para crear un nuevo objeto a través de un formulario de entrada. Puedo ver algunas opciones, y he implementado parcialmente algunas, pero nada se siente bien.

• Cree una vista con los elementos de formulario apropiados y un método para crear instancias del modelo usando varias propiedades recuperadas de los elementos del formulario usando .get ()
• Cree un modelo en el contenido de la vista y vincule elementos de formulario a eso. Incluya un método en la vista para agregar a la matriz controladora / guardar en el servidor
• Cree un modelo, agréguelo al arreglo del controlador y ábralo para editarlo

Puedo luchar contra la funcionalidad que quiero, pero preferiría asegurarme de estar al tanto de las mejores prácticas.

Actualmente tengo algo como esto (que es el segundo punto en mi lista)

<script>
App.Views.ItemCreate = Em.View.extend({
  content: App.Models.Item.create({}),
  templateName: ''create'',
  createButton: function(){

    var itemObj = this.get(''content'');
    var item = {};
    item.title = this.get(''content'').get(''title'');

    $.ajax({
      type: ''POST'',
      url: ''/test/data.json'',
      data: item,
      dataType: ''json'',
      success: function(responseData, textStatus, jqXHR) {
        App.Controllers.List.add(itemObj);
      }
    });
  }
});
</script>

<script type="text/x-handlebars" data-template-name="create">
  {{view Em.TextField id="create-title" valueBinding="content.title"}}
  <a href="#" {{action "createButton" }}>Create</a>
</script>

Cualquier ayuda muy apreciada

NOTAS

Cambié la respuesta correcta a pangratz. Aunque las otras respuestas respondieron directamente a mi pregunta, creo que aquellos que encuentran esto a través de Google deben referirse a la respuesta dada por Pangratz, ya que no solo es un buen MVC, sino que es más ambicioso: o)

Answer 1

Comunicarse con el servidor definitivamente es algo que no debería hacerse en la vista. Esto es algo para lo que es un controlador. Para separar las diferentes partes de la aplicación, incluso consideraría implementar un DataSource que maneje las solicitudes AJAX. Esta división hace que su aplicación sea más comprobable y que cada componente sea reutilizable. Las conexiones concretas de vista, controlador y fuente de datos se realizan a través de enlaces.

El flujo de trabajo para su caso podría ser el siguiente:

• La vista muestra su formulario de edición, cuyos ''valores están vinculados a un controlador
• La vista maneja una acción de guardado que le dice al controlador que guarde el objeto creado
• El controlador delega el guardado en el DataSource que finalmente inicia la solicitud de AJAX
• El controlador se notifica cuando el objeto se ha guardado

También debe mirar los datos de la memoria, que es un almacenamiento de datos del lado del cliente y maneja todos los estándares para usted. También eche un vistazo a la arquitectura de Ember.js aplicaciones - datos y EmberJS: una buena separación de las preocupaciones de Modelos, Tiendas, Controladores, Vistas en una aplicación bastante compleja?

Ver:

App.View.ItemCreate = Ember.View.extend({
  templateName: ''create'',
  createObject: function(evt) {
    var object = this.get(''content'');
    var controller = this.get(''controller'');
    controller.createObject(object);
  }
});

Controlador:

App.Controllers.List = Ember.ArrayProxy.extend({
  content: [],
  createObject: function(hash) {
    var dataSource = this.get(''dataSource'');
    dataSource.createObject(hash, this, this.createdObject);
  },
  createdObject: function(object) {
    this.pushObject(object);
  }
});

Fuente de datos:

App.DataSource = Ember.Object.extend({
  createObject: function(hash, target, callback) {
    Ember.$.ajax({
      success: function(data) {
        callback.apply(target, data);
      }
    });
  }
});

Pegue todo junto:

App.dataSource = App.DataSource.create();
App.listController = App.Controllers.List.create({
  dataSourceBinding: ''App.dataSource''
});

App.View.ItemCreate.create({
  controllerBinding: ''App.listController''
}).append();

Answer 2

Si desea seguir un modelo estricto de MVC, entonces el modelo nunca se debe crear en la vista, sino en el controlador. Ember todavía es muy joven y aún no tiene ningún patrón definido, lo que yo haría es tener su modelo establecido como el contenido de la vista (como ya lo hizo) con todas las entradas vinculadas a los diferentes atributos del modelo. Luego, cuando se presiona el botón:

createButton: function(){
  App.Controllers.List.create(this.get(''content'')); 
}

En el controlador:

create: function(model) {
  if model.valid() { //validates the model
    model.save({
      onSuccess: function(response) { // callback
        var item = App.Models.Item.create(response.item)
        App.controllers.List.add(item)
      }
    })
  }

Y finalmente el modelo:

save: function(options) {
  $.ajax({
    type: ''POST'',
    url: ''/test/data.json'',
    data: item,
    dataType: ''json'',
    success: options.onsuccess
  });
}

Esta es la forma en que otros frameworks js esperan que trabajes. Se siente un poco más detallado y complejo, pero mantiene las cosas en su lugar