Вложенные модели в Backbone.js, как подойти - PullRequest
Новая
       14

Вложенные модели в Backbone.js, как подойти

116 голосов
/ 30 июня 2011

Я получил следующий JSON с сервера.При этом я хочу создать модель с вложенной моделью.Я не уверен, какой способ достичь этого.

//json
[{
    name : "example",
    layout : {
        x : 100,
        y : 100,
    }
}]

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

// structure
Image
    Layout
...

Поэтому я определяю модель макета следующим образом: 

var Layout = Backbone.Model.extend({});

Но какой из двух (если есть) методов, указанных ниже, я должен использовать для определения модели изображения?А или В ниже?

A 

var Image = Backbone.Model.extend({
    initialize: function() {
        this.set({ 'layout' : new Layout(this.get('layout')) })
    }
});

или B 

var Image = Backbone.Model.extend({
    initialize: function() {
        this.layout = new Layout( this.get('layout') );
    }
});

Ответы [ 12 ]

1 голос
/ 20 марта 2014

У нас тоже есть эта проблема, и сотрудник команды внедрил плагин с именем backbone-nested-attribute.

Использование очень просто. Пример: 

var Tree = Backbone.Model.extend({
  relations: [
    {
      key: 'fruits',
      relatedModel: function () { return Fruit }
    }
  ]
})

var Fruit = Backbone.Model.extend({
})

При этом модель Дерева может получить доступ к фруктам: 

tree.get('fruits')

Вы можете увидеть больше информации здесь:

https://github.com/dtmtec/backbone-nested-attributes

1 голос
/ 24 сентября 2013

Если вы не хотите добавлять еще одну платформу, вы можете рассмотреть возможность создания базового класса с переопределенными set и toJSON и использовать его следующим образом: 

// Declaration

window.app.viewer.Model.GallerySection = window.app.Model.BaseModel.extend({
  nestedTypes: {
    background: window.app.viewer.Model.Image,
    images: window.app.viewer.Collection.MediaCollection
  }
});

// Usage

var gallery = new window.app.viewer.Model.GallerySection({
    background: { url: 'http://example.com/example.jpg' },
    images: [
        { url: 'http://example.com/1.jpg' },
        { url: 'http://example.com/2.jpg' },
        { url: 'http://example.com/3.jpg' }
    ],
    title: 'Wow'
}); // (fetch will work equally well)

console.log(gallery.get('background')); // window.app.viewer.Model.Image
console.log(gallery.get('images')); // window.app.viewer.Collection.MediaCollection
console.log(gallery.get('title')); // plain string

Вам понадобитсяBaseModel из этого ответа (доступно, если хотите, в виде сущности ).

Страница:
...