从backbone.js中的视图访问集合数据

hvvq6cgz  于 2022-11-10  发布在  其他
关注(0)|答案(2)|浏览(174)

我完全陷入了如何处理模型和集合的困境。数据从服务器获取到集合中,但我不知道如何访问这些数据,以便在渲染时使用它们
下面是我代码:

ImmoObject = Backbone.Model.extend();

Realty = Backbone.Collection.extend({
    model: ImmoObject,
    url: 'getall',

    initialize: function(){
        this.fetch();
    }
});

Application = Backbone.Router.extend({
    _realty: null,
    _view: null,
    routes: {
        "": "index",
        //"details": "details"
    },

    initialize: function(){
        this._realty = new Realty();
        if (this._view === null){
            this._view = new StartPage({collection: this._realty});
        }
    },

比如说,每个immoObject都有名字。2我如何遍历集合中所有元素(在呈现视图时)并输出它们的名字?3我能在StartPage.render()中做类似的事情吗?

$.each(this.collection, function(k, v){
console.log(v.name);
})
dzhpxtsq

dzhpxtsq1#

您可以使用underscore.js的each方法:

StartPage = Backbone.View.extend({
  el: $("#ul-immo-list"),

  initialize: function() {
    _.bindAll(this, "render");
    this.collection.bind('reset', this.render);
  },
  ...
  render: function() {
    this.collection.each(function(immoObject) {
      console.log(immoObject.name);
      this.el.append("<li>" + immoObject.name + "</li>")
    }
  }
});

在路由器中:

Application = Backbone.Router.extend({
  _realty: null,
  _view: null,
  routes: {
    "": "index",
  },

  initialize: function(){
    this._realty = new Realty();
    if (this._view === null){
      this._view = new StartPage({collection: this._realty});
    }
    this._realty.fetch(); 
  },
});

this._realty.fetch();将在集合上激发reset事件,该事件将重新呈现StartPage视图。

u3r8eeie

u3r8eeie2#

是的,你可以在render方法中完成,或者在应用程序视图的addOne方法中完成。
addOne方法接收模型(如果您将应用程序代码放在演示附近),则AppView中应该有类似的内容。

addOne: function(immo) {
  var name = immo.name; //Accesing the name for the model here
  var view = new ImmoView({model: immo});
  this.$("#todo-list").append(view.render().el);
},

希望这对你有帮助。

相关问题