this.collection.each在集合渲染过程中不起作用

时间:2015-12-14 19:45:29

标签: javascript backbone.js

在项目开发期间,我需要再收集一个。所以我克隆了我的旧系列并进行了设置。但是在SUCCESSFULLY fetch()之后我遇到了问题;我尝试渲染集合,但是this.collection.each(见下文)不会进入函数的“内部”。有人可以向我解释,为什么2个类似代码的类似集合不能以类似的方式工作?

我的旧系列包括电影数据: 型号:

var app = app || {};
app.User = Backbone.Model.extend({
    defaults: {
        facebook_name: undefined,
        google_name: undefined,
        google_photo: undefined,
        google_url: undefined,
        vk_name: undefined,
        vk_photo: undefined,
        vk_url: undefined,
        local_name: undefined,
        telegram: undefined,
        id: undefined
    },
    parse: function( response ) {
        response.id = response._id;
        return response;
    }
});

模型视图:

var app = app || {};
app.UserView = Backbone.View.extend({
    tagName: 'div',
    className: 'userContainer',
    events: {
    },
    initialize : function() {
        this.template= _.template( $('#userTemplate').html() );
    },
    render: function() {
        this.$el.html( this.template( this.model.toJSON() ));
        return this;
    }
});

收集:

 var app = app || {};
 app.Users = Backbone.Collection.extend({
    model: app.User,
    url: '/user/allUsers'
 });

收藏视图:

    var app = app || {};
    app.UsersView = Backbone.View.extend({
        el: '#users',
        events: {},
        initialize: function() {
            this.collection = new app.Users();
            this.collection.fetch();
            this.render();
            //console.log(this.collection);
        },
        render: function() {
              this.collection.each(function(item){
              this.renderUser(item);
          }, this);
        },
        renderUser: function(item) {
            console.log("RenderUser Collection");
            var userView = new app.UserView({
              model: item
            })
            this.$el.append(userView.render().el);
        }
    });

Collection-prototype,工作正常

    var app = app || {};
    app.Film = Backbone.Model.extend({
        defaults: {
            title: 'No name',
            year: 0,
            rated: "Unknown",
            released: 'Unknown',
            runtime: 'Unknown',
            genre: 'Unknown',
            director: 'Unknown',
            writer:'Unknown',
            actors: 'Unknown',
            plot: 'Unknown',
            language: 'Unknown',
            country: 'Unknown',
            awards: 'Unknown',
            poster: 'http://placehold.it/320x150',
            imdbRating: 0,
            imdbVotes: 0,
            imdbID: 'Unknown',
            type: 'Unknown',
            userRate: 0
        },
        parse: function( response ) {
            response.id = response._id;
            return response;
        }
    });
 var app = app || {};
 app.Films = Backbone.Collection.extend({
    model: app.Film,
    url: '/film/all'
});
    var app = app || {};
    app.FilmView = Backbone.View.extend({
        tagName: 'div',
        className: 'filmContainer',
        events: {
            'click .details': 'details',
            'click .star': 'rate'
        },
        initialize : function() {
            this.template= _.template( $('#filmTemplate').html() );
        },
        render: function() {
            this.$el.html( this.template( this.model.toJSON() ));
            return this;
        }
    });
    var app = app || {};
    app.FilmsView = Backbone.View.extend({
      el: '#films',
      events: {},
      initialize: function() {
        this.collection = new app.Films();
        this.collection.fetch();
        this.render();
      },
      render: function() {
        this.collection.each(function(item) {
          this.renderFilm(item);
        }, this);
      },
      renderFilm: function(item) {
        var filmView = new app.FilmView({
          model: item
        })
        this.$el.append(filmView.render().el);
      }
    });

通过这种方式解决了我的问题:

this.collection.fetch({
    success: function(){
        this.render();
    }.bind(this)
});

感谢mu is too short提示。

0 个答案:

没有答案