Как создать это веб-приложение с помощью 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, например, при добавлении нового объекта из боковая панель. Но по мере роста модели (и состояние становится более сложным с такими переменными, как year, currentSelection, chartType и т. д.)- который я также хотел бы отразить в URL - адресе-я хотел бы использовать MVC и, в частности, Backbone.js.

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

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

спасибо.

1 ответов


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

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

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

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