Backbone как загрузить рекурсивные данные?

Question

[Вячеслав]

Подскажите, пожалуйста, как лучше всего организовать рекурсивную загрузку данных в backbone, с неограниченным количеством вложенностей?

Что-то типа склада:

Категория 1

— Товары(товар 1, товар 2),

— Подкатегория 1.1

— — товары ( товар3, товар4)

— Подкатегория 1.2

— — товары ( товар5, товар6)

Категория 2

— Товары(товар 7, товар 8),

Answer 1

[Константин Китманов]

Backbone-relational?

Comments

[Вячеслав]

Если я правильно понял, то Backbone-relational реализует только одну часть моей задачи — привязку товаров к категориям.

А вот чтоб в категории добавлялись еще категории — нет.

Answer 2

[sdevalex]

var Item = Backbone.Model.extend({
  defaults: {
    items: [],
    parent: null //Ссылка на родительский элемент
  },

  initialize: function(){
     this.set('items', new ItemsCollection(this.get('items')));
     this.get('items').each(function(){ this.set('parent', this) }, this);
  }
});

var ItemsCollection = Backbone.Collection.extend({
  model: Item,
  //...
});

var collection = new ItemsCollection();
collection.fetch();

Comments

[sdevalex]

Если данные нужно загружать пачками для каждой категории, то стоит внести изменения в модель (делать fetch для коллекции).

[Вячеслав]

А как потом в шабончике тоже рекурсивно вывести эти итемсы? у меня получается только первый уровень вывести

[sdevalex]

Проще всего сделать хитрый код, если вам обычным многоуровневый список нужен.

<li style="padding-left: {{ level * 10 }}px">{{ label }}</li>

Если что-то посложней, то нужно отдельно думать. Разное бывает.

[Вячеслав]

Ход конечно хорош своей внезапностью :)

Но нужно бы почеловечески, чтоб шаблончик сам себе перезапускал.

Пробовал так <%= discussion.get('items') %> — выводит что это [object Object]

но если попробовать по нему пройтись — то ничего не выходит
<% _.each(discussion.get('items'), function(child){ %> покажи хоть тчо нибудь! <% }) %>

[sdevalex]

Магически ничего не получится, нужно дорабатывать… могут быть ошибки, я код не проверяю.

var Item = Backbone.Model.extend({
  defaults: {
    //..
    level: 0
  },

  //...

  initialize: function(){
    //..
    if(this.get('parent') !== null)
      this.set('level', this.get('parent').get('level') + 1);
  }
});

var ItemsCollection = Backbone.Collection.extend({
  //...
  getPlainList: function(list = []){
     this.each(function(model){
        list.push(model);
        this.getPlainList.call(model.get('items'), list);
     }, this);

      return list;
  }
});

<% _.each(discussion.getPlainList(), function(child){ %> покажи хоть тчо нибудь! <% }) %>

[sdevalex]

> Пробовал так <%= discussion.get('items') %> — выводит что это [object Object]
Ну да, правильно. Вы получаете коллекцию…

<% discussion.get('items').each(function(model){ %>
    <div><%= model.get('label') %></div>
<% } %>

[Вячеслав]

Изменил немного инициализацию

initialize: function(){
    var children = this.get("children");
    if (children){
        this.set('children', new ItemsCollection(children));
    }else{
        this.set('children', false);
    }
  }

И применив этот each

<% discussion.get('children').each(function(child){ %>
    <div><%= model.get('text') %></div>
<% } %>

Почти достиг желаемого результата, единственная загвоздка шаблон сам себя не вызывает.
при этом фаербаг пишет какую то странную ошибку:
Элемент доступен по идентификатору/имени в глобальной области видимости. Используйте вместо этого соответствующий стандарту W3C метод document.getElementById(). (33 out of range 32)

[sdevalex]

Лучше оставьте инициализацию так, как я написал. Лучше проверять длину коллекции, чем сравнивать с false… в будущем будет меньше проблем.

По шаблонам… вам не с ними нужно возиться, а с рекурсивными представлениями. Посмотрите как тут реализовано представления и какие классы созданы. У вас немного другая структура, но классы останутся те же.

[sdevalex]

Должны быть:

var DiscussionView = ...; //базовое представление для управления секциями
var DiscussionSectionView = ...; //список комментариев + родительский комментарий
var DiscussionCommentView = ...; //комментарий

И два шаблона:

<script type="text/template" id="section-template">
  <div class="primary"></div>
  <div class="items"></div>
</script>

<script type="text/template" id="comment-template">
  <div class="comment">{{ text }}</div>
</script>

Answer 3

[kuzemchik]

Backbone Relational мега-тормозная.
Я описывал руками связи между вложенными коллекциями и глобальной. Каждая локальная коллекция заполняет себя из глобальной во время инициализации.
Если записей не много (меньше тысячи) можно просто грузить в коллекции, и доставать во время рендера то количество которое нужно собирая дерево налету.

Answer 4

[Алексей Куреев]

Обычно сначала вытаскивается первый уровень узлов, при попытке открыть его динамически подключается второй. Это делается через метод модели fetch. Всё, что требуется - передавать ID родительской категории.