best - ¿Patrón MVP con framework Javascript?

backbone js

Question

¿Alguien ha podido implementar el modelo MVP con cualquier framework de javascript? Estoy teniendo problemas para descubrir cómo hacer que el presentador -> vea la inversión desde el código del servidor a JavaScript. Tengo algunas ideas, pero un poco piratas y me gustaría ver qué están haciendo los demás.

Answer 1

Compruebe PureMVC fuera. También tienen puerto para JavaScript.

Answer 2

Consulte el proyecto angular en http://angularjs.org/ y no dude en hacer cualquier pregunta al grupo de correo.

Está diseñado para funcionar bien junto con jQuery. Muy útil para escribir aplicaciones TESTABLE MVC JS.

Answer 3

Eche un vistazo a knockout.js que es un marco MVVM para sus páginas web. Proporciona un marco realmente hermoso y fácilmente extensible para vincular un modelo y una vista de una manera libremente acoplada.

Answer 4

Eche un vistazo a Riot.js , una microlibrería MVP de 1kB (!) Completamente nueva que tiene todo lo que necesita para crear una aplicación de JavaScript modular y escalable. También hay una demo en toda regla.

Answer 5

El objetivo principal con MVP es la disociación de diferentes aspectos en el código. Normalmente, en JavaScript, hay 3 aspectos importantes:

1. Manejo de eventos
2. Manipulación DOM
3. Comunicación del servidor (llamadas AJAX)

Para cada una de estas preocupaciones, hay un término correspondiente de MVP:

1. EventHandling = Presenter
2. Manipulación de DOM = Ver
3. Llamadas AJAX = Modelo

Dado que, de hecho, no siempre es sencillo implementar los 3 aspectos, un EVENT BUS puede ser útil. Este bus debe ser un singleton y todos los eventos, planteados en diversos contextos, deben publicarse en el bus. El presentador debe registrarse en sus eventos y reaccionar en consecuencia cuando suceden.

Aquí es cómo funcionaría:

Lo primero que pasa es la carga de la página. Escuche esto utilizando el modelo de evento normal o jQuery o lo que sea conveniente. Crea el modelo, la vista y el presentador. El Presentador debe mantener las instancias de Vista y Modelo ya que las usará.

var model = new Model();
var view = new View();
var presenter = new Presenter(model, view);

Recuerde que Presenter es el controlador de eventos, por lo que el bus debe saberlo y enrutar los eventos para su manejo:

bus.registerHandler(presenter);

El primer evento es el "init", lo que significa que la página se ha cargado y todos los objetos de MVP están configurados:

bus.init(); // call this yourself

Esto provocaría algo en el presentador, como una función. Prefiero la convención on ... naming, en este ejemplo presenter.onInit (). Esto da la oportunidad de instalar oyentes de UI:

// in the Presenter
onInit: function() {
  view.addSubmitListener();
  view.addWhateverListener();
  ...
}

// in the View (using jQuery)
addSubmitListener: function() {
  $("#submitButton").click(function() {
    var formData = ...
    bus.submit(formData); // publish an event to the bus
  });
}

Cuando se hace clic en el botón Enviar, se llama a bus.submit (formData) y esto lo enrutará al controlador - presenter.onSubmit (formData):

// in the Presenter
onSubmit: function(formData) {
  model.postForm(formData, function(data) {
    // handle the response
    view.updateSomething(data);
  });
}

Y así sucesivamente ... El truco completo es vincular el bus con el presentador y luego estás en el bucle.

HTH

Answer 6

Estaba buscando algunos ejemplos de marcos MVP y se topó con este enlace, que podría ser muy útil para decidir sobre el marco en el que se quiere trabajar: MV * Frameworks

Answer 7

Estamos hablando de MVP aquí gente! ¡No MVC! Es mi opinión que la industria aún no está lista para MVP. Todo el mundo todavía está tratando de comprender MVC.

Answer 8

Otro, para gente de jQuery: http://javascriptmvc.com/

Solo una nota de que Ext JS también admite el patrón MV (x) desde la versión 4.0, que mencionaré como ex persona de Ext. Como la mayoría de los marcos, también lo llaman "MVC" (al igual que la mayoría de las personas en el mundo JS, consulte TodoMVC , a diferencia de TodoMVP). Sin embargo, desde un punto de vista práctico, las herramientas están ahí en Ext para implementar la parte C / P del patrón que mejor se adapte a sus necesidades. Los patrones son útiles, pero como casi cualquier cosa, pueden limitar su pensamiento cuando se los trata dogmáticamente.

Answer 9

Parece que Google usa GWT MVP:

Google GWT

Answer 10

Sé que esta pregunta es antigua, pero creo que vale la pena mencionarla aquí. Mi voto es para Backbone.js. Incluso docs dice que es MVC, yo diría que es MVP.

• VIEW = plantilla html (jQuery.template)
• MODELO = Backbone.Model
• PRESENTER = Backbone.View (capa entre su temperamento de visualización y cómo enlazar los datos, y más cosas que puede hacer) y qué es lo mejor que puede usar en vistas de par de métodos de procesamiento (plantillas html) o cambiar cuál usar. .

y lo que es mejor todavía tienes el controlador

• CONTROLLER = Backbone.Controller

La alternativa podría ser como mencionó @JoshRivers, knockoutJS, pero mi opinión personal es que la plantilla de vista está saturada de cosas vinculantes.

Y la última nota. Thing is View como V desde MVC o MVP es algo que puede construirse desde su plantilla sin codificarlo, haga un buen analizador de plantillas HTML y estará listo :) Créame, la convención es su amigo.