BackboneJS с XML ajax

Это вопрос из двух частей от новичка JS.

Итак, я пытался создать базовое приложение с помощью requireJS, выполнив учебник Thomas Davis.

  • Как мне создать коллекцию Backbone из вызова ajax на сервер, который предоставляет данные в XML? collections.fetch() похоже, ожидает бэкэнда JSON.

  • при попытке кое-чего, я закончил со следующим кодом, в котором страница не обновляется после заполнения коллекции "bookStore" из Ajax-обратного вызова.

    Вот как далеко я дошел до сих пор.

    var bookListView = Backbone.View.extend({
        el: $("#books"),
        initialize: function () {
            thisView = this;
            $.ajax({
                type: "GET",
                url: "books.xml",
                dataType: "xml",
                success: function (data) {
                    console.log(data);
                    $(data).find('book').each(function (index) {
                        var bookTitle = $(this).find('name').text();
                        bookStore.add({ title: bookTitle });
    
                        console.log(seid);
                    });
                    thisView.collection = bookStore;
                    thisView.collection.bind('add', thisView.tryBind);
    
                }
            }).done(function (msg) {
                alert("Data retrieved: " + msg);
            });
    
            this.collection = bookStore;
            this.collection.bind("add", this.exampleBind);
            this.collection.bind("refresh", function () { thisView.render(); });
            /*
            // This one works!
            bookStore.add({ name: "book1" });
            bookStore.add({ name: "book2" });
            bookStore.add({ name: "book3" });
            */
        },
        tryBind: function (model) {
            console.log(model);
        },
        render: function () {
            var data = {
                books: this.collection.models,
            };
            var compiledTemplate = _.template(bookListTemplate, data);
            $("#books").html(compiledTemplate);
        }
    });
    

Здесь обратный вызов успеха в функции "initialize", кажется, правильно обрабатывает данные и добавляет их в коллекцию. Однако страница не обновляется.

Пока я проходил через консоль Firebug, страница обновляется. Как решить эту проблему?

Ответ 1

  • Вы можете переопределить функцию parse по умолчанию, чтобы обеспечить поддержку XML. Он должен вернуть данные, преобразованные в JSON http://backbonejs.org/#Collection-parse

  • Привяжите рендеринг к событию reset вместо refresh для Backbone < 1.0 или к событию sync для Backbone >= 1.0

Это может выглядеть так:

var Book = Backbone.Model.extend();

var Books = Backbone.Collection.extend({
    model: Book,
    url: "books.xml",

    parse: function (data) {
        var $xml = $(data);

        return $xml.find('book').map(function () {
            var bookTitle = $(this).find('name').text();
            return {title: bookTitle};
        }).get();
    },

    fetch: function (options) {
        options = options || {};
        options.dataType = "xml";
        return Backbone.Collection.prototype.fetch.call(this, options);
    }
});

var bookListView = Backbone.View.extend({
    initialize: function () {
        this.listenTo(this.collection, "sync", this.render);
    },

    render: function () {
        console.log(this.collection.toJSON());
    }
});

var bks = new Books();
new bookListView({collection: bks});
bks.fetch();

И демо http://jsfiddle.net/ULK7q/73/