backbone.js 正在从集合更新模型[已关闭]

xcitsw88  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(127)

**已关闭。**此问题不符合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>
5uzkadbs

5uzkadbs1#

以下是我一眼就能看出的几个问题:
1.您可以使用此参数定义BannerModel:{id:"",img:"",html:""}。这是默认值吗?如果是,则需要在“defaults”属性下进行设置,如下所示:{ defaults: {id:"",img:"",html:""} }。实际上,这似乎根本没有必要。
1.在BannerCollection中,您传递BannerModel做为'model'属性。它必须是Model的 instance,所以请传递bannerModel

  1. parse函数并不像你所拥有的那样做任何事情,它不是必需的,只有当你想在数据进入你的视图之前对来自API的数据进行预处理时才需要。
    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

相关问题