Backbone.js 事件未在单击时触发，并且无法高亮显示dom元素

我正在制作一个Backbone.js应用程序，在这个应用程序中，我得到了有关事件的问题。。和过滤器

问题1：

当我单击列表项“事件未触发…”。。。方法不被调用

问题2：在学生视图中，单击“highScoreBtn”时未调用“getScore”方法

请求：

在我过滤了“scored”（得分）中的高值之后，我如何将“li”（高光）设置为添加一些类名（“.highlight）

我的代码有什么问题。。或者谁能给我一个正确的建议

我的示例JS：

$(function() {
    var student = [
        {name:"student0",scored:75},{name:"student1",scored:49},{name:"student2",scored:25},
        {name:"student3",scored:96},    {name:"student4",scored:42},    {name:"student5",scored:85},    
        {name:"student6",scored:68},    {name:"student7",scored:19},    {name:"student8",scored:85},
        {name:"student9",scored:26}
    ]


var model = Backbone.Model.extend({
    defaults:{
        name:"undefined",
        scored:"0"
    }
});

var collection = Backbone.Collection.extend({
    model:model
});

var studentView = Backbone.View.extend({
    tagName:'li',
    className:"list",
    events:{
        'click .list':"called"
    },
    template:_.template($("#studentTemplate").html()),
    render:function(){
        this.$el.append(this.template(this.model.toJSON()));
        return this;
    },
    called:function(){
        alert("i a called")
    }
});

var studentsView = Backbone.View.extend({
    el:$(".page"),
    events:{
        "click #highScoreBtn":"showHighScore"
    },
    initialize:function(){
        this.collection = new collection(student);
        this.render();
    },
    render:function(){
        var that = this;
        _.each(this.collection.models, function(item){
            that.$el.find('ul').append(new studentView({model:item}).render().el);
        })
    },
    getHighSocre:function(){
        return _.each(this.collection, function(item){
            return item.get('scored') > 60;
        })
    },
    showHighScore:function(){
        this.getHighSocre();
    }
})

var newStudentList = new studentsView();
});

HTML:

用户管理器
李{
边框底部：1px纯色灰色；
列表样式：无；
填充：10px；
}
保险商实验室{
填充：0；
保证金：0；
}
李：最后一个孩子{
边界：0；
}
学生经理




名称：评分：

对于问题1:
看起来StudentView正试图观察自己。 视图应该观察其子元素的DOM事件

var-studentView=Backbone.View.extend({
标记名：'li'，
//类名：“列表”#移动到模板
活动：{
“单击。列表”：“已调用”
},
..（省略）

名称：评分：

对于问题2：
showHighScore调用是否正确？
若您添加调试代码，开发人员工具的控制台中会显示什么

getHighSocre:function（）{
log（'调用getHighScore'）；
return u.each（this.collection，function，item）{
返回项目。获取（'得分'）>60；
})
},
showHighScore:函数（）{
log（'showHighScore被调用'）；
var highscore=this.getHighSocre（）；
控制台日志（高分）；
}

如果调用了函数，您应该添加一些代码，以便在getHighScore函数中突出显示

--编辑--

可以通过在StudentView中观察主干模型事件来实现

这不是一种干净的方式，因为模型的highlight属性应该在模型初始化时设置

var model = Backbone.Model.extend({
    defaults:{
        name:"undefined",
        scored:"0",
        highlight:false
    }
});

var studentView = Backbone.View.extend({
  ...
  initialize: function(){
     this.model.on("change", this.highlight, this);
  },
  ...
  highlight: function(){
     if (this.model.get('hilight')){
         $('.list', this.el).addClass("hilight");
     }
  }
})

var studentsView = Backbone.View.extend({
    ...
    getHighSocre:function(){
        _.each(this.collection, function(item){
            if (item.get('scored') > 60){
               item.set(hilight:true);
            } 
        })
    },
    ...
})

---

我不确定，但我希望以下代码可以帮助您：

render:function(){
    var that = this;
    that.$el.find('ul').empty();
    _.each(this.collection.models, function(item){
        that.$el.find('ul').append(new studentView({model:item}).render().el);
    })
},

showHighScore:function(){
    this.getHighSocre();
    this.render();
}

---

顺便问一下，在筛选dom元素之后，您能否提供一些提示来突出显示这些元素。。

render:function(){
    var that = this;
    that.$el.find('ul').empty();
    _.each(this.collection.models, function(item){
        that.$el.find('ul').append(new studentView({model:item}).render().el);
    })
},

showHighScore:function(){
    this.getHighSocre();
    this.render();
}