¿Cómo puedo separar JavaScript View/Logic code correctamente?

Question

Recibo objetos JSON de un websocket con indicadores de actualización/creación/eliminación. En base a esta información, actualizo, creo o elimino elementos HTML y enlazo devoluciones de llamada. Esto puede afectar a múltiples elementos HTML.

Mi enfoque actual era poner todo en objetos concretos que gestionan la generación de HTML a través de jQuery ej .:

$.("<table>").addChild($("<tr>")).addClass('test') 

y detectores de eventos de vinculación. Pero con la adición de más y más código se volvió realmente complicado y ahora estoy buscando una forma adecuada de separar el código.

¿Hay alguna idea sobre cómo hacer esto correctamente? Marcos? Tal vez jQuery Templates (que todavía me deja en la oscuridad sobre cómo agregar callbacks limpiamente)?

Answer 1

En su caso puedo recomendarle que eche un vistazo a Knockoutjs, AngularJS o Backbone.js.

Answer 2

Para representar HTML puede utilizar Handlerbars.js es muy maduro y tener mucha documentación

Para suceso de unión Te recomiendo usar jQuery delegate en el objeto padre que no había borrado con la actualización ajax. De esta forma solo necesita reasignar eventos en cada solicitud

Answer 3

Busque el marco MVVM. Esto es exactamente lo que necesita, ya que su JavaScript se vuelve cada vez más complejo. Separa sus necesidades de preocupación entre su código de Presentación (html) y Presentation Logic (JavaSript)

Knockout.js es una muy buena biblioteca para comenzar, le recomiendo que lea los tutoriales para comenzar.

ejemplo rápido:

HelloWorld.html

<div data-bind="value: helloWorldVariable"></div> 
<input type="button" data-bind="click: helloWorld" /> 

page.js:

var ViewModel = { 
    helloWorldVariable: ko.observable('test'), 
    helloWorld: function() { 
     this.helloWorldVariable('clicked!'); 
    } 
} 

// Bind viewmodel 

Cuando se hace clic en el botón, el div mostrará automáticamente "clic" . Esto, obviamente, se puede usar al recuperar información del servidor a través de solicitudes AJAX y no tiene que depender de ID de control/clases de CSS. Pueden cambiar en cualquier momento y tu código sigue siendo relevante.

Answer 4

Echa un vistazo Backbone.js. Es un MVC-ish muy popular y flexible configurado para aplicaciones de navegador JS. El código está alojado en github.

Answer 5

Knockout JS valdría la pena, separa el modelo de datos del modelo de vista y se ocupa de las dependencias entre ellos.