带有 XML ajax 的 BackboneJS [英] BackboneJS with XML ajax

问题描述

这是一个来自 JS 新手的由两部分组成的问题.

this is a two part question from a JS newbie.

因此，我尝试按照 Thomas Davis 的教程使用 requireJS 创建主干应用程序.>

So, I was trying to create a backbone application using requireJS by following Thomas Davis's tutorial.

1. 如何通过对提供 XML 数据的服务器的 ajax 调用来创建 Backbone 集合?collections.fetch() 似乎期待 JSON 后端.

1. How do I go create Backbone collections out of an ajax call to a server that provides data in XML? collections.fetch() seem to be expecting a JSON backend.

在尝试一些事情时，我最终得到了以下代码，其中页面在从 Ajax 成功回调中填充集合bookStore"时不会刷新.

while trying some things, I ended up with the following code, in which the page doesn't refresh upon populating the collection "bookStore" from within Ajax success-callback.

这是到目前为止我已经走了多远.

Here is how far I have gotten so far.

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);
    }
});

这里，初始化"函数中的成功回调似乎正在正确处理数据并添加到集合中.但是，页面不会刷新.

Here, the success call-back in the "initialize" function seems to be processing the data properly and adding to the collection. However, the page doesn't refreshed.

当我逐步浏览 Firebug 控制台时，页面会刷新.我该如何解决这个问题?

While I was stepping through the Firebug console, the page gets refreshed however. How do I solve this problem?

推荐答案

1. 您可以覆盖默认的 parse 函数以提供 XML 支持.它应该返回转换为 JSON 的数据 http://backbonejs.org/#Collection-parse

1. You can override the default parse function to provide XML support. It should return the data transformed into JSON http://backbonejs.org/#Collection-parse

将渲染绑定到 reset 事件，而不是 Backbone<1.0 的 refresh 或 Backbone>= 的 sync 事件1.0

Bind the render to a reset event instead of refresh for Backbone<1.0 or to a sync event for 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/

这篇关于带有 XML ajax 的 BackboneJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！