从集合更新模型

我对骨干很陌生。我正试图在这个HTML模板中显示一些JSON内容。创建一个集合并获取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>

来源

2014-03-25 Rasmikant

如果你甚至不告诉我们什么不工作，我们不能建议问题出在哪里。 –

下面是我看到了蝙蝠的几个问题：

您使用此参数定义BannerModel：{id:"",img:"",html:""}。这是否意味着默认值？如果是这样，则需要在'defaults'属性下设置，如：{ defaults: {id:"",img:"",html:""} }。实际上，这似乎并不需要。
在BannerCollection中，您将BannerModel作为“模型”属性。它需要一个模型的实例，所以通过它bannerModel。
解析函数不会按照您拥有的方式执行任何操作。只有当您希望在API进入视图前预先处理数据时，才需要它。
您可以在'render'函数中调用fetch()。这不适合它。实际上，Collections &模型根本没有渲染功能。只有意见。在你的视图中，你可以将它放在'初始化'方法中，或者你可以按需要调用的其他方法。
在您的fetch（）成功回调中，您将遍历集合并在某些情况下设置模型。首先，当你到达成功回调的时候，Backbone已经用已经用一系列bannerModel填充你的收藏。这是fetch（）所做的。它调用您的API并自动使用数据填充您的Collection/Model。如果您想在填充数据前拦截/解析数据，那么这就是parse（）方法的用途。
您不要在集合上调用render（），而是在Views上调用它。
最后一件事。您的代码似乎意味着该模型的id属性的值将是一个文本字符串，如“services1.html”。 'id'应该保留给一些唯一的键 - 通常是一个整数或者一个GUID。 Backbone实际上会默认查找此属性，并将其用作模型的唯一标识符。如果你想使用一些其他的价值，你可以使用idAttribute - http://backbonejs.org/#Model-idAttribute

来源

2014-03-25 13:54:26

从集合更新模型

回答

相关问题