BackboneJS 与 XML ajax

Question

这是 JS 新手提出的由两部分组成的问题。

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

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

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

   这是我到目前为止所取得的进展。

   var bookListView = Backbone.View.extend({
       el: $("#books"),
       初始化：函数（）{
           这个视图=这个；
           $.ajax({
               类型：“获取”，
               url: "books.xml",
               数据类型：“xml”，
               成功：函数（数据）{
                   控制台.log(数据);
                   $(data).find('book').each(function (index) {
                       var bookTitle = $(this).find('name').text();
                       bookStore.add({ 标题: bookTitle });
   
                       控制台.log(seid);
                   });
                   thisView.collection = bookStore;
                   thisView.collection.bind('add', thisView.tryBind);
   
               }
           }).done(函数(消息){
               Alert("检索到的数据：" + msg);
           });
   
           this.collection = bookStore;
           this.collection.bind("add", this.exampleBind);
           this.collection.bind("刷新", function () { thisView.render(); });
           /*
           // 这个有效！
           bookStore.add({ name: "book1" });
           bookStore.add({ name: "book2" });
           bookStore.add({ name: "book3" });
           */
       },
       tryBind：函数（模型）{
           控制台.log(模型);
       },
       渲染：函数（）{
           变量数据 = {
               书籍：this.collection.models，
           };
           var generatedTemplate = _.template(bookListTemplate, 数据);
           $("#books").html(compiledTemplate);
       }
   });
   

在这里，“初始化”函数中的成功回调似乎正在正确处理数据并添加到集合中。但是，页面没有刷新。

当我单步执行 Firebug 控制台时，页面会刷新。我该如何解决这个问题？

Answer 1

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

2. < p>将渲染绑定到 reset 事件，而不是 Backbone<1.0 的 refresh 或绑定到 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/