Backbone.js的不追加要素，仍然是数据控制台正确 [英] backbone.js not appending elements, still the data console properly

问题描述

  

可能重复：结果
  <一href=\"http://stackoverflow.com/questions/14453219/backbone-js-change-not-triggering-while-the-name-change\">Backbone.js - 变化不触发而更名

在我下面的函数，控制台显示DATAS，但没有什么是追加到body标签，任何一个找到我的问题。

我的JSON：

  [
    {名称：'student4}，
    {名称：'student5}，
    {名称：'student6'}
]
 

code：

 （函数（$）{
VAR模型= Backbone.Model.extend（{
  默认值：{
    名称：'默认名
  }
}）;VAR集合= Backbone.Collection.extend（{
  型号：型号，
  网址：数据/ names.json
}）;VAR itemViews = Backbone.View.extend（{
  标记名：​​礼，
  渲染：功能（）{
    这$ el.html（this.model.get（'名'））;
    返回此;
  }
}）VAR视图= Backbone.View.extend（{
  EL：$（＃联系人），
  初始化：功能（）{
    this.collection =新集（）;
    this.collection.on（复位，this.render，这一点）;
    this.collection.fetch（）;
  }，
  渲染：功能（）{
    VAR认为这=;
    _.each（this.collection.models，函数（项目）{
      that.renderName（项目）;
    }）
  }，
  renderName：函数（项目）{
    VAR ItemView控件=新itemViews（{模式：项目}）;
    这$ el.append（itemView.render（）EL）; //没有渲染
  }
}）;
VAR stView =新的视图（）;}）（jQuery的）
 

解决方案

这个问题似乎是这两行：

  this.collection.fetch（）; //好像它不取;
this.render（）;
 

Col​​lection.fetch 是一个异步操作。到时候你渲染你的观点，请求还没有恢复，所以你的集合为空。尝试渲染方法绑定到集合重置事件来代替：

  collection.on（复位，this.render，这一点）;
this.collection.fetch（）;
 

Possible Duplicate:
Backbone.js - change not triggering while the name change

In my following function, console show the datas, but nothing is appending to body tag, any one find me the issue..

my json :

[
    {name:'student4'},
    {name:'student5'},
    {name:'student6'}
]

code :

    (function($){   
var model = Backbone.Model.extend({
  defaults:{
    name:'default name'
  }
});

var collection = Backbone.Collection.extend({
  model:model,
  url: 'data/names.json'
});



var itemViews = Backbone.View.extend({
  tagname:'li',
  render:function(){
    this.$el.html(this.model.get('name'));
    return this;
  }  
})

var view = Backbone.View.extend({
  el: $("#contacts"),
  initialize:function(){
    this.collection = new collection();
    this.collection.on("reset", this.render, this);
    this.collection.fetch();
  },
  render:function(){
    var that = this;
    _.each(this.collection.models, function(item){
      that.renderName(item);
    })
  },
  renderName:function(item){
    var itemView = new itemViews({model:item});
    this.$el.append(itemView.render().el); //nothing rendering
  }
});


var stView = new view();

})(jQuery)

解决方案

The problem appears to be in these two lines:

this.collection.fetch(); //it seems it's not fetching;
this.render();  

Collection.fetch is an asynchronous operation. By the time you render your view, the request has not yet returned, so your collection is empty. Try binding the render method to the collections reset event instead:

collection.on("reset", this.render, this);
this.collection.fetch();

这篇关于Backbone.js的不追加要素，仍然是数据控制台正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！