Javascript 使用主干js读取XML并在视图中追加

如何读取XML并在视图中添加主干。

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

XML文件（读取

assetur

，

宽度

，

高度

）

主干js代码

var Book=Backbone.Model.extend（）；
var Books=Backbone.Collection.extend({
型号：书，
url:“file.xml”，
解析：函数（数据）
{
var$xml=$（数据）；
返回$xml.find（'assets'）.map（函数（）
{      
var bookTitle=$（this）.find（'asset'）.each（function（））{
var this_url=$（this.attr（'assetur'）；
var this_width=$（this.attr（'width'）；
var this_height=$（this.attr（'height'）；
$（'.character list'）。追加（'
'+
''+
“
”）；
});
返回{title:bookTitle}；
}).get（）；
},
获取：函数（选项）
{
选项=选项| |{}；
options.dataType=“xml”；
返回Backbone.Collection.prototype.fetch.call（this，options）；
}
});
var bookListView=Backbone.View.extend({
初始化：函数（）
{
this.listenTo（this.collection，“sync”，this.render）；
},
渲染：函数（）
{
log（this.collection.toJSON（））；
}
});
var bks=新书（）；
新的bookListView（{collection:bks}）；
fetch（）；

要附加的HTML代码

---

尽管上面的append功能对我来说很有效，但在主干

解析

函数中实现这一点并不是很好的做法。

不要将呈现逻辑放入集合的

解析

函数中

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

首先，让我们简化集合解析。在主干文档中，应仅执行以下操作：

函数被传递原始

响应

对象，并应返回 要添加到集合的模型属性数组

parse:函数（响应）{
var$xml=$（响应）；
//这将返回一个对象数组
返回$xml.find（'assets'）.children（'assets'）.map（function（）{
var$资产=$（本）；
//返回原始的“模型”属性
返回{
资产：$asset.attr（'assetur'），
宽度：$asset.attr（'width'），
高度：$asset.attr（'height'））
};
}).get（）；
},

然后，为每个资产创建一个简单视图：

var BookView=Backbone.View.extend({
标记名：“li”，
模板：ux0.template（“>”），
render:function（）{
this.el.html（this.template（this.model.toJSON（））；
归还这个；
}
});

在列表视图中处理每个资源的呈现

var BookListView=Backbone.View.extend({
初始化：函数（）{
this.childViews=[]；
this.listenTo（this.collection，“sync”，this.render）；
},
render:function（）{
这个。$el.empty（）；
this.collection.each（this.renderBook，this）；
归还这个；
},
renderBook:函数（模型）{
var view=newbookview（{model:model}）；
this.childview.push（视图）；
这是.el.append（view.render（）.el）；
},
});

要使用它：

var bks=新书（），
视图=新的BookListView（{el:$（'.character list'），集合：bks}）；
view.render（）；
fetch（）；

您可能需要为解析函数中的每个资产创建模型，并将它们添加到资产集合中。在listView中，您可以像在解析函数中一样渲染它们，或者更好的方法是为每个模型创建一个视图，并让视图自己渲染。这将是处理模型的一种更主要的方法&v观点。这里有一些帖子可以帮助你。@Emile Bergeron…感谢你解决了这个问题。。请回复我以后对上述代码提出的疑问。。

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

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