从集合中更新模型[关闭]

Question

我对骨干很陌生。我正在尝试在此 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>

Answer 1

以下是我立即发现的一些问题：

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