Базовая загрузка URL и отправка шаблонов в шаблон javascript

Question

Я изучал Backbone.js и использую его с приложением на django, где изначально отображаются две фотографии: одна - главная, а другая - миниатюра следующей фотографии. Я возвратил данные json, содержащие URL основной фотографии и миниатюрную фотографию, используя Tastypie в URL /api/v1/photo, Итак, что я сделал в Backbone:

// MODEL
var PhotoItem = Backbone.Model.extend({
    urlRoot:  '/api/v1/photo',
});

var PhotoView = Backbone.View.extend({
template: _.template($('#mainimg').html()),
initialize: function()  {
    this.render();
},
render: function(){

    var templateArgs={
        photo: this.model.get('photo')
    };
    alert(this.model.get('photo')); // this alerts undefined
    this.$el.html(this.template(templateArgs));
}
});

var photoItem = new PhotoItem({id:1});
photoItem.fetch();
var photoView = new PhotoView({model: photoItem});

В django-шаблоне здесь находится javascript, в котором аргумент шаблона используется для отображения основной фотографии.

<script type="text/template" id="mainimg">
<img class = "main-img" id="mainimgid" src = <%= photo %> alt="main photo" />
</script>

И это данные json, которые возвращаются для photoItem с id=1:

{"next_url": "/photos/preloaded/designstyles/thumb/arabic-living(main-photo-id)-thumbnail.png",
 "parent_id": "1","photo": "/photos/preloaded/designstyles/big/arabic-bedroom.png",
 "photo_id": "1", "resource_uri": "", "tags": "set([Decimal('2'), Decimal('3')])", "type": "Homedesign"}

Но изображение не может быть загружено. Я получаю ошибку JavaScript 404:

http://localhost:8000/undefined

Я думаю, это может быть связано с асинхронной загрузкой кода. И Src для изображения остается

<img class = "main-img" id="mainimgid" src = <%= photo %> alt="main photo" />

когда я вижу в окне отладки с отладчиком Chrome.

Что мне не хватает? или где я не прав? Могу ли я получить помощь?

Answer 1

Вы не можете создать представление без фактического получения информации с сервера. Вы в основном передаете пустую модель Backbone в контроллер представления, поэтому model.get('photo') возвращается неопределенным. Я бы порекомендовал вам пересмотреть базовый AJAX, так как это то, что Backbone.Model.fetch делает.

Асинхронные вызовы возвращаются немедленно, чтобы избежать зависания взаимодействия с пользователем. Вот почему вы не должны создавать представление, пока не получите ответ от сервера. Правильное решение будет примерно таким:

var photoItem = new PhotoItem({id:1}), photoView;
photoItem.fetch({
  success: function () {
    photoView = new PhotoView({model: photoItem});
  },
  error: function () {
    alert('Something bad happened!);
  }
});