Dynamically set backbone collection url возвращает модели без атрибутов

Question

У меня есть базовое мобильное приложение, привязанное к веб-службе Rails. Все модели других объектов загружаются и отображаются корректно, но этого конкретного нет. Проблема, с которой я сталкиваюсь, заключается в том, что Item создается, но не загружает атрибуты. Я подтвердил правильный вывод json рельсов api. Разница между этой коллекцией и всеми другими коллекциями этого приложения заключается в том, что эта коллекция имеет родительский идентификатор, который должен использоваться в URL-адресе для загрузки правильных элементов (category_id).

Теперь ... смешно, что если я удаляю аргумент {category_id: options.attributes[0].category_id} на вызов конструктора ItemCollectionView и жесткий код category_id прямо в URL-адрес, он работает! (Однако мне нужно назначить это динамически в зависимости от категории родительского вида

Вот мои классы:.

export class ItemCollectionView extends Backbone.View { 
    public template: string; 
    public collection: itemsImport.Items; 

    constructor(options?: Backbone.ViewOptions){ 
     this.collection = new itemsImport.Items({category_id: options.attributes[0].category_id}); 
     super(options); 
    } 
    ... 
    public addOne(item: itemImport.Item): void{ 
     var view: itemItemImport.ItemItemView = new itemItemImport.ItemItemView({el: this.el, model: item}); 
     //Breakpoint right here shows that item.attributes.id = undefined 
     view.render(); 
    } 
} 

export class Items extends Backbone.Collection { 
    public url: string; 

    constructor(attributes?: any, options?: any){ 
     this.url = 'http://localhost:3000/categories/' + attributes.category_id + '/items'; 
     this.model = itemImport.Item; 
     super(attributes, options); 
    } 
} 

В моей отладки я могу подтвердить, что:

options.attributes[0].category_id == 1; 

и

this.url == 'http://localhost:3000/categories/1/items'; 

и ответ от этого URL-адреса:

[{"id":1,"category_id":1,"title":"Item 1","description":null,"active":true,"comment":null,"extra":null,"deleted":"0","url":"http://localhost:3000/categories/1/items/1.json"},{"id":2,"category_id":1,"title":"Item 2","description":null,"active":true,"comment":null,"extra":null,"deleted":"0","url":"http://localhost:3000/categories/1/items/2.json"}] 

, который вы можете видеть, является правильным ответом json.

Так что мой вопрос: что я делаю неправильно? || Каков правильный способ динамического переноса переменных в коллекции, чтобы установить правильный URL-адрес во время выполнения?

Спасибо за вашу помощь

Answer 1

Другой ответ, который будет выбран, будет работать при использовании javascript, но при использовании TypeScript компилятор будет жаловаться, что url должен быть свойством, а не методом. Решение, которое я нашел (который будет работать в JavaScript, а) это установить url аргумент на fetch() метод сбора, как показано ниже

export class ItemCollectionView extends Backbone.View { 
    public template: string; 
    public collection: itemsImport.Items; 

    constructor(options?: Backbone.ViewOptions){ 
     this.collection = new itemsImport.Items({category_id: options.attributes[0].category_id}); 
     super(options); 
    } 

    public initialize(options?:any): void { 
     this.listenTo(this.collection, 'add', this.addOne); 
     this.listenTo(this.collection, 'reset', this.addAll); 
     this.collection.fetch({url: this.collection.seturl(options.attributes[0].category_id)}); 
    } 

    ... 

} 

Я надеюсь, что это помогает будущим пользователям ищет эту функциональность в Backbone

Answer 2

Определение url как функция, как во втором случае here

var Notes = Backbone.Collection.extend({ 
    url: function() { 
     return this.document.url() + '/notes'; 
    } 
}); 

И проверьте вкладку сети, если вы действительно загрузить правильный URL.

Answer 3

Можно определить динамическое свойство url для вашей базовой модели в вашем машинописном коде. Это было бы лучше, чем использование параметра url во всех ваших звонках до fetch().

Вы можете либо сделать это с помощью ECMAScript 5 поглотитель:

export class Items extends Backbone.Collection { 
    get url(): string { 
     return '/categories/' + this.get('category_id') + '/items'; 
    } 

    constructor(attributes?: any, options?: any){ 
     this.model = itemImport.Item; 
     super(attributes, options); 
    } 
} 

или установив его непосредственно на prototype:

export class Items extends Backbone.Collection { 
    constructor(attributes?: any, options?: any){ 
     this.model = itemImport.Item; 
     super(attributes, options); 
    } 
} 
Items.prototype.url = function() { 
    return '/categories/' + this.get('category_id') + '/items'; 
}; 

Второе решение будет работать на всех браузер.