读取XML并使用Backbone js在视图中追加

Question

如何阅读XML并使用Backbone附加到视图中。

已读取XML文件并成功附加到视图中。但我不知道如何在Backbone结构中使用（使用其模型）。

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>

Backbone js code

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>

即使上述附加功能对我有用，但在Backbone parse函数中处理此功能并不好。

Answer 1

不要将渲染逻辑放入集合的parse函数中。

集合的作用是管理模型并与API同步。 视图的责任是呈现。

首先，让我们简化集合解析。从Backbone文档中，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();