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

问题描述

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

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

XML file has been read and successfully appended in view. But i don't know how to approach in Backbone structure (Using its Model).

<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

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代码

HTML code to append

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

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

Even-though the above append functionality works for me, it's not good practice to approach this in Backbone parse function.

推荐答案

不要将渲染逻辑放入集合中解析功能。

Don't put the rendering logic into the collection's parse function.

集合的作用是管理模型并与API同步。 视图负责渲染。

The collection's role is to manage models and syncing with an API. It's the view's responsibility to render.

首先，让我们简化集合解析。从Backbone文档中，应该做仅限以下内容：

First, let's simplify the collection parsing. From the Backbone documentation, parse should do the following only:

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

然后，为每个资产制作一个简单的视图：

Then, make a simple view for each asset:

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

并且在列表视图中处理每个资产的呈现。

And it's in the list view that the rendering of each assets is handled.

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

这篇关于读取XML并使用Backbone js在视图中追加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！