BackboneJS with XML ajax

Question

이것은 JS 초보자가 전하는 두 가지 질문입니다.

그래서, Thomas Davis's tutorial을 따라 requireJS를 사용하여 백본 응용 프로그램을 만들려고했습니다.

1. 어떻게 XML 데이터를 제공하는 서버에 Ajax 호출에서 백본 컬렉션을 만들 가야합니까? 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. XML을 지원하기 위해 기본 parse 함수를 재정의 할 수 있습니다. 그것은 백본 < 1.0 또는 백본에 대한 sync 이벤트에 대신 refresh의 reset 이벤트에 http://backbonejs.org/#Collection-parse

2. 바인딩이 렌더링 JSON으로 변환하여 데이터를 반환해야합니다> = 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/