Эта (общая) логика относится к Backbone Model или View или отдельной утилите?

Question

Я рисую диаграмму с иконками, которые могут различаться по размеру (см. Изображение).

Масштаб иконок в моем Backbone View "A" рассчитывается на основе ряда атрибутов.в моей модели диаграммы: availableWidth, availableHeight, yGranularity, xMax и т. д.

Когда масштаб значков был рассчитан, я бы хотел, чтобы это значение было доступно как для вида A, так и для вида B (где B служит диаграммойЛегенда).

2 вопроса:
1) В Backbone, где бы я разместил «iconSizeCalculation», чтобы вычисленное значение было доступно для обоих представлений.

2) Каков хороший способ обработки различных «действий» в Backbone?Допустим, представление B должно отвечать только тогда, когда вышеупомянутый (вычисляемый атрибут) iconSize изменяется, тогда как A должен реагировать на изменения размера, времени, степени детализации и т. Д. Что я имею в виду под «действием», так это то, как я могу отличить изменения одного атрибута от нескольких-атрибут меняется и реагирует соответственно?(Должен ли я считать свойства в model.changedAttributes?)
(Или, может быть, эта проблема связана с неправильным разделением функций View / Controller?)

Спасибо:)

Answer 1

1) In Backbone, where would be I place the "iconSizeCalculation" so that the calculated value is available to both views.

Backbone имеет встроенную систему событий, которая сделает это очень просто.Я собираюсь предположить, что у вас будет более одного элемента на вашем дисплее, и что легенда покажет размер всех отображаемых элементов.Это справедливое предположение?

Чтобы настроить это, у меня было бы три отдельных класса представления, все связанные с событиями:

• ChartView - который представляет всю диаграмму
• IconView - представляет отдельные значки для отображения на диаграмме
• A LegendView - представляет легенды на графике

ChartView должен получить коллекцию моделей Icon,Как только он получит это, он должен перебрать список значков и создать / отобразить / отобразить IconView для каждого значка в коллекции.Он также должен передавать всю коллекцию в LegendView.

LegendView должен перебирать список значков и отображать некоторый текст для каждого, используя LegendIconView для каждого.LegendIconView должен прослушивать change:size события из моделей Icon, чтобы он мог знать, когда изменяется «размер» модели.Событие изменения сообщит вам, какой значок был обновлен, поэтому вы можете соответствующим образом обновить отображение легенды.

2) What is a good way of handling different "actions" in Backbone?

При привязке к событию change в моделях Backboneи коллекции, которые можно привязать к универсальному change или к определенному изменению атрибута.Например, если у вас есть атрибут size, вы можете прослушать изменения размера с помощью: change:size.Это работает как для моделей, так и для коллекций.Когда вы слушаете change:size в модели, он говорит вам, что этот атрибут изменился для этой модели.Когда вы слушаете change:size в коллекции, она говорит вам, что размер модели изменился.Аргументы события также сообщают вам, какая модель изменилась в обработчике коллекции.

---

Вот примерное представление о том, как может выглядеть ваш код для удовлетворения ваших потребностей

Icon = Backbone.Model.extend({});
Icons = Backbone.Collection.extend({
  model: Icon
});

ChartView = Backbone.View.extend({
  initialize: function(){
    _.bindAll(this, "renderIcon");
  },

  render: function(){
    var legendView = new LegendView({collection: this.collection});
    legendView.render();
    $(this.el).append(legendView.el);

    this.collection.each(this.renderIcon);
  },

  renderIcon: function(icon){
    var iconView = new IconView({model: icon});
    iconView.render();
    $(this.el).append(iconView.el);
  }
});

IconView = Backbone.View.extend({
  events: {
    // set up your events, to handle clicking, dragging, resizing, etc
  },

  render: function(){
    var html = // render some html here. jquery templates, mustache, or whatever
    $(this.el).html(html);
  }
});

LegendView = Backbone.View.extend({
  initialize: function(){
    _.bindAll(this, "renderIconLegend");
  },

  renderIconLegend: function(icon){
    var legendIconView = new LegendIconView({model: icon});
    legendIconView.render();
    $(this.el).append(legendIconView.el);
  },

  render: function(){
    this.collection.each(this.renderIconLegend);
  }
});

IconLegendView = Backbone.View.extend({
  initialize: function(){
    this.model.bind("change:size", this.updateSize, this);
  },

  updateSize: function(model, newSize){
    var sizeEl = this.$(".sizeElement");
    sizeEl.text(newSize);
  },

  render: function(){
    var html = // render some html here
    $(this.el).html(html);
  }
});

var data = [{ /*some icon data*/ }, {/*more icon data*/}];
var icons = new Icons(data);
var chart = new ChartView({collection: icons});
chart.render();
$("#myChartElement").html(chart.el);

Этодолжен дать вам представление о том, как все это будет работать.

Когда у отдельной модели обновлен атрибут size, экземпляр IconLegendView для этой модели получит событие изменения, что позволит вам обновить отображениелегенда для этой иконы.