**已关闭。**此问题不符合Stack Overflow guidelines。当前不接受答案。
此问题似乎离题了,因为**它缺少足够的信息来诊断问题。**请更详细地描述您的问题,或者在问题本身中描述include a minimal example。
八年前就关门了。
Improve this question
我是一个新的 Backbone.js 。我试图显示一些JSON内容到这个HTML模板。创建了一个集合,并获取JSON文件数据。在集合的呈现方法,更新模型,这是绑定到视图。
请指出问题出在哪里。
<script type="text/template" id="banner_template">
<div class="span8"><img src="<%=img%>"></div>
<div class="span4 bg-lightRedcustom no-margin"><div class="bnrPadding"><h2 class="fg-white"><%=html%></h2></div></div>
</script>
<div id="banner_container"> </div>
<script type="text/javascript">
var BannerModel=Backbone.Model.extend({id:"",img:"",html:""});
var bannerModel=new BannerModel();
var BannerCollection=Backbone.Collection.extend({
model:BannerModel,
url:"res/banner-res.json",
parse: function (response) {
return response;
},
render: function() {
this.fetch({success:function(a){
_.each(a.toJSON(),function(obj){
if(obj.id=="services1.html"){bannerModel.set({id:obj.id,img:obj.img,html:obj.html});
console.log(bannerModel);
}
});
}}
);
return this;
},
});
var bannerCollection=new BannerCollection();
bannerCollection.render();
var BannerView = Backbone.View.extend({
initialize: function(){
this.render();
},
template: _.template($("#banner_template").html()),
render: function(){
this.$el.html( this.template(this.model.toJSON()) );
}
});
var banner_view = new BannerView({ el: $("#banner_container"),model:bannerModel});
更新1
**
这是我的代码
<script type="text/template" id="banner_template">
<div class="span8"><img src="<%=img%>"></div>
<div class="span4 bg-lightRedcustom no-margin"><div class="bnrPadding"><h2 class="fg-white"><%=html%></h2></div></div>
</script>
<div id="banner_container"> </div>
<script type="text/javascript">
var BannerCollection=Backbone.Collection.extend({
url:"res/banner-res.json"
});
var bannerCollection=new BannerCollection();
var BannerModel=Backbone.Model.extend({});
var bannerModel=new BannerModel({});
var BannerView = Backbone.View.extend({
el: $("#banner_container"),
initialize: function(){
this.model.on('change',this.render,this);
bannerCollection.fetch({success:function(a){
_.each(a.toJSON(),function(obj){
if(obj.bid=="services1.html"){
bannerModel.set({img:obj.img,html:obj.html});
}
});
}}
);
},
model:bannerModel,
template: _.template($("#banner_template").html()),
render: function(){
this.$el.html(this.template(bannerModel.toJSON()) );
}
});
var banner_view = new BannerView({model:bannerModel});
</script>
1条答案
按热度按时间5uzkadbs1#
以下是我一眼就能看出的几个问题:
1.您可以使用此参数定义BannerModel:
{id:"",img:"",html:""}
。这是默认值吗?如果是,则需要在“defaults”属性下进行设置,如下所示:{ defaults: {id:"",img:"",html:""} }
。实际上,这似乎根本没有必要。1.在
BannerCollection
中,您传递BannerModel
做为'model'属性。它必须是Model的 instance,所以请传递bannerModel
。1.您可以在'render'函数中调用
fetch()
。这不是它的正确位置。实际上,Collections & Models根本没有render函数。只有View有。在View中,您可以将它放在'initialize'方法中,或者放在其他可以根据需要调用的方法中。1.在你的取物()成功回调时,您将遍历集合并根据某些条件设置模型。首先,当您到达成功回调时,Backbone * 已经 * 用bannerModel的数组填充了您的集合。这就是fetch它调用您的API并自动用数据填充您的集合/模型。如果您想在填充数据之前截取/解析该数据,这就是parse()方法的作用。
1.您不是在Collection上调用render(),而是在Views上调用它。
1.最后一件事。您的代码似乎暗示模型的
id
属性的值将是一个文本字符串,如'services1.html'。'id'应该保留给某个唯一的键-通常,它是一个整数或者可能是一个GUID。默认情况下, Backbone 网实际上会查找此属性,并将其用作模型的唯一标识符。如果您想使用其他值,可以使用idAttribute
-http://backbonejs.org/#Model-idAttribute