ractive.js

// my_list is an array of objects updated by ajax

var my_list = [{'id':1, 'name':'Jack'},{'id':2, 'name':'Robin'}];

// with lodash
var add_new_messages = function(data) {
    var new_list = my_list;

    new_list.push.apply(new_list, data);
    new_list = _.uniq(new_list, 'id');
    new_list = _.sortBy(new_list, 'id');

    my_list = new_list;

    var last_message = _.max(my_list, function (message) {
        return message.id;
    });

    last_msg_id = last_message.id;

    chatbox.set('messages', my_list); // re-rendering won't happen without this
    chatbox.set('total', my_list.length);
};

// without lodash
var add_new_messages = function(data) {
    my_list.push.apply(my_list, data);
    
    var last_message = _.max(my_list, function (message) {
        return message.id;
    });

    last_msg_id = last_message.id;

    chatbox.set('total', my_list.length);
};

// Ractive definition
var chatbox = new Ractive({
    el: '#zm-chat-box',
    template: '#chat-element',
    data: {
        messages: my_list,
        total: total,
        pull_direction: function (flag) {
            if (flag) return 'right';
            else return 'left';
        }
    }
});