骨干js排序我的联系人列表

时间:2014-02-25 21:03:53

标签: javascript php backbone.js

我有这个代码来获取我的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;
});

如果我将比较器放在backbone.collection中它有用但我必须解释一下。它将所有名称一次性放置在标准图像上,而且在此过程中一次一个地显示一个联系人的图像可以看到排序功能正在运行,因为图像以字母顺序而不是从下到上显示,但是当完成时,列表不是有序的。我希望我足够清楚。

1 个答案:

答案 0 :(得分:1)

您需要在个人收藏中添加comparator。添加模型时,骨干集合会自动排序。

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

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

如果用户在线,则会返回0,如果不在线,则会返回1Backbone.Collection.sort()升序进行排序,以便在其之前显示零。

更新

根据以下评论,试试这个:

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
    }

});