Question

我对骨干很新。我试图在这个HTML模板中显示一些JSON内容。创建一个集合并获取JSON文件数据。在集合的render方法上，更新与视图绑定的模型。

请建议问题出在哪里。

<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

以下是我看到的一些问题：

使用以下参数定义BannerModel：{id:"",img:"",html:""}。这是默认值吗？如果是，则需要在'defaults'属性下设置，例如：{ defaults: {id:"",img:"",html:""} }。实际上，它似乎没有必要。
在BannerCollection中，您将BannerModel作为“模型”属性传递。它必须是模型的实例，因此将其传递给bannerModel。
解析功能不会像你拥有的那样做任何事情。只有当您想要在API进入您的视图之前预先处理数据时，才需要它。
您可以在'render'功能中调用fetch()。这不适合它。事实上，收藏品＆amp;模型根本没有渲染功能。只有视图。在您的视图中，您可以将其放在“初始化”方法中，也可以根据需要调用其他方法。
在fetch（）成功回调中，您遍历集合并在某些条件下设置模型。首先，当您获得成功回调时，Backbone已经已经使用bannerModel数组填充您的集合。这就是fetch（）的作用。它会调用您的API并自动使用数据填充您的Collection / Model。如果要在填充之前拦截/解析该数据，那就是parse（）方法的用途。
您不会在Collection上调用render（），而是在Views上调用它。
最后一件事。您的代码似乎暗示模型的id属性的值将是文本字符串，例如'services1.html'。应该为某些唯一键保留'id' - 通常，它是整数或GUID。 Backbone实际上会默认查找此属性，并将其用作模型的唯一标识符。如果您想使用其他值，可以使用idAttribute - http://backbonejs.org/#Model-idAttribute

从集合中更新模型

1 个答案: