LINUX.ORG.RU

Backbone.js (распарсить коллекцию в шаблоне)

 , , ,


0

1

Всем привет!

Уважаемые 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>

Что я делаю не так?


//мимо проходил

Быть может, всё же

_.each(cards, ...)

?

Hater ★★ ()
Ответ на: комментарий от Hater

Посмотрел внимательнее: таки нет. А что в результате происходит?

Hater ★★ ()
var Cards = Backbone.Tastypie.Collection.extend({
    url: "/cards_list/"
});

А чего такая слабая модель? Без полей (атрибутов)? И почему наследуется от Tastypie? Обычно View привязывают к модели и рендерят через this.el во View.

menangen ★★★★★ ()
Ответ на: комментарий от Hater

Да ничего не происходит(. Почему-то просто не отрабатывается _.each()

Sektor ()
Ответ на: комментарий от Sektor

Sektor, сорри, я не смогу тебе помочь больше с Backbone так как уже начал забывать что там к чему, да и работал я с ним всего месяц, пиши вопрос на stackoverflow, если нужен перевод твоего русского на инглиш для стэка: menangen@mail.ru

menangen ★★★★★ ()

Посмотри что тебе выдаст cards.toJSON() в render.

PS Ну и модели в темплейты пихать не очень.

PPS Если юзаешь бекбон-тестипай, то csrf делается проще:

Backbone.Tastypie.csrfToken = $('meta[name="csrf-token"]').attr('content');
C1nde ()
Последнее исправление: C1nde (всего исправлений: 1)
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.