¿Cómo crear esta aplicación web con Backbone.js?

Question

Estoy luchando para entender mi colección, modelos, etc. en Backbone.

Digamos que la aplicación consiste en una barra lateral, un timeslider y un gráfico de columnas:

proporcionar algunos antecedentes, he aplicado previamente la clase columnChart utilizando el patrón de herencia funcional:

namespace.columnChart = function() { 

    var chart = {}; 

    var width = 500; 
    var height = 500; 
    var data = []; 

    chart.setState = function(state){ 
     data = state.data; 
     updateVis(); 
    } 

    function updateVis(){ 
     ... render chart based on state ... 
    } 

    return chart; 
} 

Con enlace simple, puedo llamar al método setState en columnChart cuando, por ejemplo, agrego una nueva entidad desde la barra lateral. Pero a medida que el modelo crece (y el estado se vuelve más complejo con variables como year, currentSelection, chartType, etc.), que también me gustaría reflejar en la URL, me gustaría utilizar MVC y específicamente Backbone.js.

1. Entonces, ¿cómo estructurar esto en Backbone?
   • ¿Debo volver a escribir mi clase columnChart (y clases similares)?
   • ¿Hay una manera fácil de detectar qué ha cambiado en el estado y solo establecer el nuevo estado usando estos parámetros?

Un ejemplo de atar la barra lateral, timeslider y el gráfico de columna en conjunto - con ayuda de Backbone - sería muy apreciado.

Gracias.

Answer 1

Haría una subclase de Backbone.Model llamada DataSet que representa cada elemento en la lista de casillas de verificación de la izquierda. Esto debería tener un indicador booleano llamado showInGraph. Crea una subclase Backbone.Collection para representar el conjunto completo de elementos de datos posibles en la sección de la mano izquierda. Complete esta colección con instancias de su DataSet para todas las posibilidades. Luego, cada elemento obtiene 2 subclases Backbone.View distintas. Uno es OptionView que simplemente muestra la casilla de verificación y si está marcada o no (representando el atributo de elemento de entrada HTML basado en si showInGraph es verdadero). Esto también necesitará un controlador de eventos vinculado al atributo onChange de la casilla de verificación para alternar showInGraph. Backbone propagará automáticamente ese cambio y volverá a renderizar las vistas por usted. Use esto en el div izquierdo y asócielo con la colección de todos los conjuntos de datos disponibles.

La segunda subclase de vista es ChartView que representa el elemento en el gráfico si su atributo showInGraph es verdadero; de lo contrario, simplemente lo ignora.

Tómelo paso a paso. Primero solo haga la lista de casillas de verificación de la izquierda. Eso debería ser sencillo siguiendo los documentos de la red troncal. Luego trate de hacer simplemente un simple <ul> a la derecha con un <li> para cada conjunto de datos que tenga showInGraph verdadero pero nada si showInGraph es falso. Pasar de allí al gráfico es solo una cuestión de representación más elegante en la vista ChartView.

Pruébalo y verifica si puedes avanzar un poco. Publica otro comentario si te quedas atascado o necesitas una aclaración.