骨幹提取url和發送templateargs到javascript模板

我一直在學習Backbone.js和我在django上使用它的應用程序，其中最初顯示兩張照片：一張是主照片，另一張是下一張照片的縮略圖。我已經使用URL /api/v1/photo中的Tastypie返回了包含mainphoto url和縮略圖照片的json數據。所以，我一直在做骨幹是：骨幹提取url和發送templateargs到javascript模板

// 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>

這是返回photoItem與ID = 1 JSON數據：

{"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調試器。

我錯過了什麼？或者我錯在哪裏？我能得到幫助嗎？

來源

2013-11-29 Santosh Ghimire

在模型實例化之後添加fetch調用也不起作用。 –

如果不實際從服務器接收信息，則無法創建視圖。你基本上將一個空的Backbone模型傳遞給視圖控制器，這就是爲什麼model.get('photo')返回undefined。我建議你查看基本的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!); 
    } 
});

來源

2013-12-21 00:03:22 MiguelCarranza

骨幹提取url和發送templateargs到javascript模板

回答

相關問題