带有XML ajax的BackboneJS

Question

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

所以,我试图通过跟随Thomas Davis的教程使用requireJS创建一个骨干应用程序.

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

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

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

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

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

当我踩过Firebug控制台时,页面会刷新.我该如何解决这个问题？

Answer 1

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

2. 将渲染绑定到reset事件而不是refreshBackbone <1.0或syncBackbone> = 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/