Всем привет!
Уважаемые js-кодеры, подскажите, пожалуйста, где ошибка? Я только начал изучать backbone.js, посему не судите строго за код (однако буду рад объективным замечаниям). Получаю колекцию с сервера следующего содержания
{"meta": {"limit": 20, "next": null, "offset": 0, "previous": null, "total_count": 1},
"objects": [{"card_id": "1", "id": 1, "image_preview": "/static/cards_data/img/18_optics/18_1_bg_prev.png", "resource_uri": "/api/v1/cards_list/1/"}]}
Не получается распарсить данную коллекцию в шаблоне. Не выполнется «_.each».
(function() {
var _sync = Backbone.sync;
Backbone.sync = function(method, model, options){
options.beforeSend = function(xhr){
var token = $('meta[name="csrf-token"]').attr('content');
xhr.setRequestHeader('X-CSRFToken', token);
};
return _sync(method, model, options);
};
})();
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
options.url = 'http://localhost:8000/api/v1' + options.url + "?format=json";
});
var Cards = Backbone.Tastypie.Collection.extend({
url: "/cards_list/"
});
var CardsList = Backbone.View.extend({
render: function() {
var cards = new Cards();
cards.fetch({
success: function() {
var template = _.template( $("#cards-list-template").html(), {card: cards.models} );
$(".content").html(template);
},
error: function() {
console.log("ERROR!!!");
}
});
}
});
var Router = Backbone.Router.extend({
routes: {
"" : "index"
}
});
var cardslist = new CardsList();
var router = new Router();
router.on('route:index', function() {
cardslist.render();
});
Backbone.history.start();
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
...
<script type="text/javascript" src="{% static "distrib/jquery-2.1.1.min.js" %}"></script>
<script type="text/javascript" src="{% static "distrib/underscore-min.js" %}"></script>
<script type="text/javascript" src="{% static "distrib/backbone-min.js" %}"></script>
<script type="text/javascript" src="{% static "distrib/backbone-tastypie.js" %}"></script>
<script type="text/javascript" src="{% static "project/js/main.js" %}"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="content"></div>
</div>
</div>
</div>
<script type="text/template" id="cards-list-template">
<h1>Hello, backbone!</h1>
<table class="table table-striped table-hover">
<thead>
<tr>
<td>ID</td>
<td>Image Preview</td>
</tr>
</thead>
<tbody>
<% _.each(card, function(card) { %>
<tr>
<td><%= card.get("id") %></td>
<td><%= card.get("image_preview") %></td>
</tr>
<% }) %>
</tbody>
</table>
</script>
</body>
</html>
Что я делаю не так?
