javascript - backbone js 对我的联系人列表进行排序

Question

我有这个代码来获取我的 Facebook 联系人列表。我如何首先对我的在线联系人列表进行排序。我在 peopleViewPerson 中检查了联系人是否在线，但我不知道如何实现这一点，我尝试过js 函数 sort() 但它在我的列表中没有给出结果。

var PeopleView = Backbone.View.extend({
className: 'peopleView',
initialize: function() {
  this.people = Hula.user.get("people");

this.people.on('add', this.addPerson, this);
  this.people.on('remove', this.render, this);
  $(".nav_item").removeClass("nav_item_s");
  $("#people_nav").addClass("nav_item_s");
},
render: function(){
    this.$el.empty();
    var header = $('<div id="people_header">');
    var title = $('<div class="t34 title">');
    title.html("Friends");
    header.append(title); 
    this.$el.append(header);
    var addOption = $('<div id="people_add_option">');
    var addInput = '<div id="addp"><div id="people_add_input_h"><form id="add_person_input_form" ><input id="add_person_input" name="s" type="text" value="Enter Hularing ID..." ></input></form></div></div>';
    addOption.html(addInput);
    this.$el.append(addOption);
    var list = $('<div id="people_list" >');
    this.$el.append(list);
    this.people.each(this.addPerson, this);
    list.sort();

    return this;
},
addPerson: function(person){
    var view = new PeopleViewPerson({model: person});
    this.$("#people_list").prepend(view.render().$el);

},
events: {
    'keypress #add_person_input': 'addNewPerson',
},
addNewPerson: function(e){
    var ID = $('#add_person_input').val();
    if(ID !=="Enter Hularing ID..."){
        if(e.which == 13) {
            if(validate(ID)){
                Hula.subscribe(ID);
                 this.$('#add_person_input').val("")
                 $("#add_person_input_form")[0].reset();
                $('#add_person_input').blur().focus();                   
                e.preventDefault();
            }
        }
    }
}
});

var PeopleViewPerson = Backbone.View.extend({
className: 'friend_holder',
initialize: function() {
    $(this.el).attr('id', jid_to_id(this.model.get("jid")));
    this.model.on('all', this.render, this);
    this.model.get('conversation').get('messages').on('add', this.onNewMessage, this);
},
render: function() {
    var img = $('<div class="friend_img_h">');
    if(this.pic() == null){
        if(this.online() === true){
                img.html('<img src="farax/img/default.png" style="border:4px solid green;" />');
        } else {
                img.html('<img src="farax/img/default.png" style="border:4px solid white;" />');
        }            
    } else {
        var img_src = 'data:'+this.picType()+';base64,'+this.pic();
        if(this.online() === true){
                img.html('<img src="'+img_src+'" style="border:4px solid green;" height="50" width="50"/>')
        } else {
                img.html('<img src="'+img_src+'" style="border:4px solid white;" height="50" width="50"/>')
        }
    } 
    var info_h = $('<div class="friend_info_h">');
    var person_name = $('<div class="friend_name">');
    person_name.html(this.name());
    var line2 = $('<div class="friend_line2">');
    var status = this.status();
    line2.html(status);
    var option_h = $('<div class="friend_option_h">');
    option_h.html('<div class="msg_person_icon" ></div>');
    // CONTACT INFO DIV.
    var option_h1 = $('<div class="friend_option_h1">');
    // CONTACT INFO IMAGE IN CSS FILE.
    option_h1.html('<div class="msg_person_icon1"></div>');
    // CONTACT FACEBOOK TIJDLIJN.
    var option_h2 = $('<div class="friend_option_h2">');
    // CONTACT FACEBOOK TIJDLIJN IMAGE IN CSS FILE.
    option_h2.html('<div class="msg_person_icon2"></div>');
    var option_h3 = $('<div class="friend_option_h3">');
    option_h3.html('<div class="msg_person_icon3"></div>');
    // HUIDIG CONTACT NAAM.
    var naam = this.name();
    // MET HET REGISTREREN VAN NIEUWE GEBRUIKERS WORDT DE GEBRUIKERSNAAM Robert0Ilmer DUS ZET IK BIJ DE CONTACT 
    // NAAM EEN 0 OP DE PLAATS VAN DE SPATIE OM ZE HETZELFDE TE MAKEN.
    var naam1 = naam.replace(" ","0");
    var temp = "";
    // TEMP IS OM HET ARRAY ITEM OP TE SLAAN ALS DE NAAM NIET OVEREENKOMT, DIT IS DE IMAGE URL DIE STAAT VOOR 
    // DE NAAM DUS OP DIE MANIER HEB IK DE IMAGE URL AL OPGESLAGEN IN TEMP EN KAN IK HET GEBRUIKEN ALS DE NAAM
    // GEVONDEN IS.
    javaScript_array.forEach( function (arrayItem, index){
            var x = arrayItem;
            // VERGELIJK DE NAAM UIT DE DATABASE MET DE NAAM IN DE JAVASCRIPT ARRAY GEDEFINIEERD IN 
            // ../HU1/INDEX.PHP
            if(naam1 === arrayItem){
                        // VOOR DEBUGGING 
                        // alert(index + ': ' + x);               
                        option_h3.html('<div class="msg_person_icon3"><img src="'+ temp +
                                       '" width="35" height="35"/></div>');
            }     
            temp = x;    
    });     
    if(this.ask()== "subscribe"){
        line2.prepend('<span class="pending_out">Request pending.</span>');
    }
    if(this.pending()){
        line2.prepend('<span class="pending_in">Pending authorisation!</span>');
    }
    info_h.append(person_name).append(line2);
    this.$el.html(img);
    this.$el.append(info_h);
    this.$el.append(option_h);      
    this.$el.append(option_h1);             
    this.$el.append(option_h2);             
    this.$el.append(option_h3);             
    return this;
},
jid: function() { return this.model.get('jid');},
name: function() { return this.model.get('name'); },
status: function() { return this.model.get('status'); },
pic: function() { return this.model.get('picture').pic; },
picType: function() { return this.model.get('picture').picType; },
ask: function() { return this.model.get('ask'); },
subscription: function() { return this.model.get('subscription'); },
pending: function() { return this.model.get('pending'); },
online: function() { return this.model.get('online'); },
events: {
    'click .friend_img_h': 'loadPerson',
    'click .msg_person_icon1': 'fbInfo', 
    'click .msg_person_icon': 'messagePerson' 
},
fbInfo: function(){ 
    // DE STRING idsd BEVAT NU -11107049625@chat.facebook.com
    var idsd = this.jid();
    // VOOR DEBUGGING
    // alert(idsd);
    // ZOEK NAAR  @chat.facebook.com EN VERVANG HET MET NIKS DUS VERWIJDER HET.
    var id1 = idsd.replace("@chat.facebook.com","");
    // alert(id1);
    // NU BEVAT id1 DIT   -11107049625 DUS ZOEKEN WE NAAR - EN VERWIJDEREN HET.
    var id2 = id1.replace("-","");
    // alert(id2);
    // NU BEVAT id2 HET ID NUMMER VAN HET AANGEKLIKTE CONTACT EN KUNNEN WE DE .
    myFunction(id2);
},
loadPerson: function(){ 
    Hula.screen.person.render(this.model);
},
messagePerson: function(){
    Hula.screen.conversation.render(this.model);
},
onAll: function(person){
},
onNewMessage: function(message){
    $('#people_list #'+jid_to_id(this.jid())+' .friend_line2').html(message.get("message"));
},
OnStatusChange: function(change){
    $("#people_list #"+id_to_jid(this.jid())).html(this.status().toString());
}    
});

我有这个集合，我在其中放置了比较器，但它没有对我的列表进行排序

var Person = Backbone.Model.extend({    
defaults: {
    jid : null,
    name : null, 
    online: false, 
    status : null, 
    picture : { 
        pic : null, 
        picType : null
    },
    subscription: 'none',
    ask: null, 
    pending: false, 
    counter: { messages:0, stuff:0 },
    conversation: null
},
initialize: function(){
    this.set('conversation', new Conversation());   
  this.sortVar = 'name';    
  },
comparator: function( collection ){
  var that = this;
  return( collection.get( that.sortVar ) );
},
updateName: function(name){this.set("name", name);},
updateOnline: function(online){this.set("online", online);},
updatePicture: function(picture){ this.set("picture", picture);},
updateSubscription: function(subscription){this.set("subscription", subscription) ;},
updateAsk: function(ask){this.set("ask", ask);},
updateStatus: function(status){this.set("status", status);},
updatePending: function(pending){this.set("pending", pending);}
})


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

如果我将比较器放在主干中。集合它可以工作，但我必须解释一下。它一次将所有名称与标准图像一起放置，并且在此过程中一次出现一个联系人的图像我可以看到排序功能正在工作，因为图像按字母顺序显示，而不是从下到上，但完成后列表没有排序。我希望我足够清楚。

Answer 1

您需要在您的个人集合中添加一个比较器。添加模型时，主干集合会自动排序。

var People = Backbone.Collection.extend({
    model: Person,

    comparator: function(model){
        return model.get('online') ? 0 : 1;
    }
});

如果用户在线，则返回0，如果不在线，则返回1。 Backbone.Collection.sort() 按升序排序，因此零将出现在 1 之前。

更新

根据下面的评论，尝试一下:

var People = Backbone.Collection.extend({
    
    model: Person,
    
    comparator: function( model ){
        
        var online =  model.get('online') ? 0 : 1;
        var name = model.get('name');
        
        return  [online, name]; // this will sort by online status first, then person name
    }
    
});