Несколько подпредставлений одного и того же класса в Ampersand.js

Question

Я пытаюсь добавить несколько подпредставлений к моему представлению в Ampersand.js, где подпредставления одного типа. Тем не менее, Ampersand, кажется, только позволяет мне иметь один объект типа класса, и объявление второго заменяет все атрибуты первого. Например:

var chart1 = new PieChart('userChart');
var chart2 = new PieChart('deviceChart');

module.exports = PageView.extend({
  pageTitle: 'Home',
  template: require('../../../templates/pages/home.hbs'),
  render: function() {
    this.renderWithTemplate();
    this.renderSubview(chart1, document.getElementById('userChart'));
    this.renderSubview(chart2, document.getElementById('deviceChart'));
  }
});

Будет отображаться только второй график, однако первый график будет отображаться нормально, если я закомментирую второй. После осмотра объектов оба имеют 'deviceChart' в качестве параметров. Я попытался сделать совершенно новый класс под названием PieChart2 и это устраняет проблему, но создание совершенно нового класса для каждого типа диаграмм, которые я хочу показать, было бы нелепым.

Есть идеи?

Answer 1

Я думаю, что у вас есть проблемы с вашей PieChart где-то. Я попытался воспроизвести вашу проблему, и все работало нормально и как ожидалось. Вот мой рабочий код:

var OneView = View.extend({//analogous to your PieChart
  template: '<b></b>',
  props: {
    type: 'string'
  },

  bindings: {
    'type': 'b'
  },
  initialize: function(type){
    this.type = type;
  }
});

var view1 = new OneView('view1');
var view2 = new OneView('view2');

module.exports = View.extend({
  template: '<div><div id="view1"></div><div id="view2"></div></div>',
  autoRender: true,

  render: function(){
    this.renderWithTemplate(this);
    this.renderSubview(view1, document.getElementById('view1'));
    this.renderSubview(view2, document.getElementById('view2'));
    return this;
  }

});

Кстати, вы должны создавать свои взгляды внутри render функция. В противном случае они будут одинаковыми каждый раз, когда вы звоните render() (из-за того, как работают модули CommonJS), и, скорее всего, это не то, что вы хотите. Кроме того, для запроса элементов внутри вашего представления, вы можете использовать this.querySelector('SELECTOR') вместо document.getElementById,