使用Backbone js讀取XML並追加到視圖中

Question

如何讀取XML並在Backbone中追加視圖。

XML文件已被讀取併成功添加到視圖中。但我不知道如何在主幹結構（使用其模型）方法。

XML文件（閱讀asseturl，width，height）

<library> 
    <assets> 
     <asset asseturl="img_1.png" width="100" height="150"></asset> 
     <asset asseturl="img_2.png" width="200" height="250"></asset> 
     <asset asseturl="img_3.png" width="300" height="350"></asset> 
    </assets> 
</library> 

骨幹js代碼

var Book = Backbone.Model.extend(); 

var Books = Backbone.Collection.extend({ 
    model: Book, 
    url: "file.xml", 

    parse: function (data) 
    { 
     var $xml = $(data); 

     return $xml.find('assets').map(function() 
     {  
      var bookTitle = $(this).find('asset').each(function(){ 
      var this_url = $(this).attr('asseturl'); 
      var this_width = $(this).attr('width'); 
      var this_height = $(this).attr('height'); 

      $('.character-list').append('<li><span class="asset char">'+ 
      '<img width="'+this_width+'" height="'+this_height+'" src="'+this_url+'">'+ 
      '</span></li>'); 
     }); 
     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(); 

HTML代碼追加

<ul class="character-list"> 
</ul> 

偶雖然上述附加功能的作品對我來說，這不是一個好的做法s在主幹parse功能。

Answer 1

請勿將渲染邏輯放入集合的parse函數中。

集合的作用是管理模型並與API同步。這是視圖的責任，以呈現。

首先，讓我們簡化集合解析。從骨幹文檔，parse應做到以下幾點只是：

功能是通過原始response對象，應該返回 陣列模式的屬性被添加到集合。

parse: function(response) { 
    var $xml = $(response); 

    // this will return an array of objects 
    return $xml.find('assets').children('asset').map(function() { 
     var $asset = $(this); 

     // returns raw "model" attributes 
     return { 
      asseturl: $asset.attr('asseturl'), 
      width: $asset.attr('width'), 
      height: $asset.attr('height') 
     }; 

    }).get(); 
}, 

然後，做一個簡單的查看每個資產：

var BookView = Backbone.View.extend({ 
    tagName: 'li', 
    template: _.template('<span class="asset char"><img width="<%= width %>" height="<%= height %>" src="<%= asseturl %>"></span>'), 
    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    } 
}); 

而且它在列表視圖中，每個資產的渲染處理。

var BookListView = Backbone.View.extend({ 
    initialize: function() { 
     this.childViews = []; 
     this.listenTo(this.collection, "sync", this.render); 
    }, 
    render: function() { 
     this.$el.empty(); 
     this.collection.each(this.renderBook, this); 
     return this; 
    }, 
    renderBook: function(model) { 
     var view = new BookView({ model: model }); 
     this.childViews.push(view); 
     this.$el.append(view.render().el); 
    }, 
}); 

要使用它：

var bks = new Books(), 
    view = new BookListView({ el: $('.character-list'), collection: bks }); 
view.render(); 
bks.fetch();