Как создать это веб-приложение с Backbone.js? - PullRequest
Новая
       33

Как создать это веб-приложение с Backbone.js?

6 голосов
/ 13 мая 2011

Я изо всех сил пытаюсь разобраться с коллекциями, моделями и т. Д. В Backbone.

Допустим, приложение состоит из боковой панели, таймлайдера и столбчатой ​​диаграммы:

Web app mockup

Чтобы обеспечить некоторый фон, я ранее реализовал класс columnChart, используя шаблон функционального наследования: 

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;
 }

При простом связывании я могу вызвать метод setState для columnChart при, например, добавлении нового объекта из боковой панели. Но по мере роста модели (а состояние усложняется с помощью таких переменных, как год, currentSelection, chartType и т. Д.), Что я также хотел бы отразить в URL, я бы хотел использовать MVC и, в частности, Backbone.js.

  1. Так как мне структурировать это в Backbone?
    • Должен ли я переписать свой класс columnChart (и аналогичные классы)?
    • Есть ли простой способ определить, что изменилось в состоянии, и установить новое состояние только с помощью этих параметров?

Был бы очень признателен за пример соединения боковой панели, таймлайдера и столбца с использованием Backbone.

Спасибо.

1 Ответ

8 голосов
/ 18 мая 2011

Я бы сделал подкласс Backbone.Model с именем DataSet, который представляет каждый элемент в левом списке флажков.Это должно иметь логический флаг с именем showInGraph.Вы создаете подкласс Backbone.Collection для представления полного набора возможных элементов данных в левой части.Заполните эту коллекцию экземплярами вашего DataSet для всех возможностей.Затем каждый элемент получает 2 различных подкласса Backbone.View.Один из них - OptionView, который просто отображает флажок и проверяет, установлен ли он или нет (отображает атрибут проверенного элемента ввода HTML на основе того, является ли showInGraph истинным).Для этого также потребуется обработчик события, связанный с атрибутом onChange флажка для переключения showInGraph.Backbone будет автоматически распространять это изменение и повторно отображать представления для вас.Используйте это в левом элементе div и свяжите его с коллекцией всех доступных наборов данных.

Второй подкласс представления - ChartView, который отображает элемент на диаграмме, если его showInGraph приписывает ему значение true, в противном случаеон просто игнорирует это.

Делайте это шаг за шагом.Сначала просто сделайте список флажков слева.Это должно быть просто после базовых документов.Затем попробуйте сделать простое <ul> справа с <li> для каждого набора данных, который имеет showInGraph true, но ничего, если showInGraph false.Переход оттуда к диаграмме - это просто вопрос более изобразительного рендеринга в представлении ChartView.

Попробуйте это и посмотрите, сможете ли вы добиться некоторого прогресса.Оставьте другой комментарий, если вы застряли или нуждаетесь в разъяснении.

...