BackboneJS với XML ajax

Question

đây là câu hỏi hai phần của một newbie JS.

Vì vậy, tôi đã cố tạo ứng dụng đường trục bằng cách sử dụng requireJS bằng cách theo dõi Thomas Davis's tutorial.

1. Làm cách nào để tạo bộ sưu tập xương sống ra khỏi cuộc gọi ajax tới máy chủ cung cấp dữ liệu trong XML? collections.fetch() dường như đang mong đợi một chương trình phụ trợ JSON.

2. trong khi thử một số thứ, tôi đã kết thúc bằng mã sau, trong đó trang không làm mới khi điền tập hợp "bookStore" từ trong Ajax thành công gọi lại.

   Đây là cách tôi đã nhận được cho đến nay.

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

Ở đây, sự thành công cuộc gọi trở lại trong "khởi tạo" chức năng dường như là xử lý dữ liệu đúng và thêm vào bộ sưu tập. Tuy nhiên, trang không được làm mới.

Trong khi tôi đang bước qua bảng điều khiển Firebug, trang được làm mới tuy nhiên. Làm thế nào để giải quyết vấn đề này?

Answer 1

1. Bạn có thể ghi đè hàm mặc định parse để cung cấp hỗ trợ XML. Nó sẽ trả về dữ liệu chuyển đổi thành JSON http://backbonejs.org/#Collection-parse

2. Bind render đến một sự kiện reset thay vì refresh cho Backbone < 1.0 hoặc đến một sự kiện sync cho Backbone> = 1,0

Nó có thể trông như thế này

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

Và một bản demo http://jsfiddle.net/ULK7q/73/