Backbone / javascript - 被'this'关键字搞糊涂了

Question

In the following backbone scripts, I tried to change a collection in a view click event.

var StudentView = Backbone.View.extend({

    initialize: function() {
      console.log("create  student items view");
      this.collection.bind('add',this.render,this); 
              this.collection.bind('remove',this.render,this);
    },
    render : function(){


    },
    events :{
        "click ":"select_students"
    },
    select_students: function(){
        this.collection.reset([]);
        _.each(students.models, function(m) {
            if(m.get('name')=="Daniel"){
                this.collection.add(m);
            }
        });                         
    }

});

var students_view = new  StudentView({el:$("#student_table"),collection:selected_students});    

I got this error

How should I call "this.collection" in the code?

Answer 1

You should change you select_students to

select_students: function(){
    var self = this;
    this.collection.reset([]);
    _.each(students.models, function(m) {
        if(m.get('name')=="Daniel"){
            self.collection.add(m);
        }
    });                         
}

The problem is that in JavaScript, the this context is lost in inner functions (like the one you pass to _.each ) so the general pattern is to save a reference outside of that ( self ) and then use that in the inner function.

Answer 2

Rather than using underscore's each() function, backbone collections can be iterated on directly, and can take a context to define what the 'this' variable refers to (passed as the second argument to each below).

So the best way to do this is to:

select_students: function(){
    this.collection.reset([]);
    students.each(function(m) {
        if(m.get('name')=="Daniel"){
            this.collection.add(m);
        }
    }, this);                         
}

Answer 3

You can avoid using a reference at all, utilizing Backbone's collection filter method.

select_students: function () {
    this.collection.reset(students.filter(function (student) {
        return student.get('name') == 'Daniel';
    });
}