Question

在我的骨干视图中，我从我的收藏中获取模型..

initialize:function(){
    this.collection = new collection(student);
    this.render();
},

从这个集合我使用过滤方法过滤高价值模型:(点击我触发）

getHighSocre:function(){
    return _.filter(this.collection.models, function(item){
         return parseInt(item.get('scored')) > 60
    })
},
showHighScore:function(){
    var hView = new studentView({model:this.getHighSocre()}); // sending to single view
    hView.showMe(); // I am calling this method to add a class name to each 'li' element..
}

这是我的单一观点：

var studentView = Backbone.View.extend({
    tagName:'li',
    events:{
        'click':"called"
    },
    template:_.template($("#studentTemplate").html()),
    render:function(){
        this.$el.append(this.template(this.model.toJSON()));
        return this;
    },
    called:function(){
        if(this.model.get('scored') > 60){
            this.$el.css({
                background:"#EFEFEF"
            })
        }else{
            this.$el.css({
                background:"#FCBABA"
            })
        }

    },

    showMe:function(){ // I am passing here to add a class name

        console.log(this) // make the array... here

        this.$el.css({ // but this is not getting the dom element...
             border:'1px solid red'
         })
     }
});

如何将类名添加到每个li元素中？这里有什么问题，任何人都可以帮我排序或者给我一个正确的方法来过滤集合并将类名应用到它的元素中？

Here is the jsfiddle.

Answer 1

首先，使用Backbone和Underscore，您通常不希望在集合上调用Underscore方法，例如：

_.filter(this.collection.models, function(item){

你想要调用Backbone Collection等效方法（http://documentcloud.github.io/backbone/#Collection-Underscore-Methods）：

this.collection.filter(function(item){

第二，你把拼写错误的“得分”称为“社会”;不要试图成为一个混蛋，只是指出它，因为这样的拼写错误很容易导致错误。

第三，视图期望一个模型用于其模型参数，但是您的getHighSocre方法返回过滤器的结果，即。模型的数组，所以这一行：

new studentView({model:this.getHighSocre()});

无法运作。如果您只想要第一个分数高于60的模型，请尝试使用find代替filter，如果您确实希望自己的视图让每个模型的分数都高于60，那么您可能希望将这些模型转换为新的集合，并将其作为视图的集合（而不是其模型）传递。

P.S。

这不是答案的真正部分，而只是一个注释;如果您不熟悉Javascript的三元运算符，您可能需要检查它，因为它可以减少所有这些：

    if(this.model.get('scored') > 60){
        this.$el.css({
            background:"#EFEFEF"
        })
    }else{
        this.$el.css({
            background:"#FCBABA"
        })
    }

只是：

var isAbove60 = this.model.get('scored') > 60;
this.$el.css('backgroundColor', isAbove60 ? "#EFEFEF" : "#FCBABA");

从集合中获取元素的正确方法是什么

1 个答案: