/Src/WS.EKA.Portal/Scripts/models/myMessage.js

window.Message = Backbone.Model.extend({
    urlRoot: 'api/membermessage/delete/'
});

window.MessageList = Backbone.Collection.extend({
    model: Message,
    urlRoot: 'api/membermessage/list/',
    url: function () {
        return this.urlRoot + localStorage.getItem('messagePageIndex');
    }
});

window.MessageView = Backbone.View.extend({
    el: '#jqt',
    initialize: function () {
        this.template = $('#MyMessageTemplate').html();
        this.messages = new MessageList();
    },
    events: {
        'click .messageList .deleteMsg': 'deleteMessage'
    },
    render: function () {
        var partial = { header: $('#HeaderTemplate').html(), footer: $('#FooterTemplate').html(),
            innerFooter: $('#InnerFooterTemplate').html()
        };
        var data = { hasBack: true, title: '??', btnListR: [{ name: 'avatar' }, { name: 'home'}] };

        this.$el.append(Mustache.render(this.template, data, partial));

        this.fetchMessage();

        return this;
    },

    fetchMessage: function () {
        var that = this, template;
        this.messages.fetch({
            success: function () {
                var messages = that.messages.models[0].get('Data'),
                    allCount = that.messages.models[0].get('Count');
                if (allCount == 0) {
                    template = $('#EmptyMessageTemplate').html();
                    $('.messageList').html(Mustache.render(template, [], []));
                    $('.footer').hide();
                } else {
                    template = $('#NoEmptyMessageTemplate').html();
                    var data = { messages: messages }
                    $('.messageList').html(Mustache.render(template, data, []));
                    new Plugins.PagingPlugin('.foot-paging', {
                        allCount: allCount,
                        pageIndexKey: 'messagePageIndex',
                        prevCall: function (e) { that.fetchPrev(e); },
                        nextCall: function (e) { that.fetchNext(e) },
                        numberClickCall: function (e) { that.fetchSpecific(e) }
                    });
                }
                pageView.resizeScroll();
            }
        });
    },
    fetchPrev: function (e) {
        if ($(e.currentTarget).hasClass('disable')) return;
        var pageIndex = localStorage.getItem('messagePageIndex');
        localStorage.setItem('messagePageIndex', +pageIndex - 1);
        this.fetchMessage();
    },

    fetchNext: function (e) {
        if ($(e.currentTarget).hasClass('disable')) return;
        var pageIndex = localStorage.getItem('messagePageIndex');
        localStorage.setItem('messagePageIndex', +pageIndex + 1);
        this.fetchMessage();
    },

    fetchSpecific: function (e) {
        var target = $(e.currentTarget);
        if (target.hasClass('gray')) return;
        var index = +target.attr('index');
        localStorage.setItem('messagePageIndex', index);
        this.fetchMessage();
    },

    deleteMessage: function (e) {
        var target = $(e.currentTarget),
            msgid = target.closest('li').attr('msgid');
        var message = new Message({
            id: 1,
            msgId: msgid
        });

        message.url = message.urlRoot + msgid;

        message.destroy({
            success: function (model, res) {
                if (res && res == 202)
                    pageView.goTo('MyMessage');
                else
                    pageView.goTo('ErrorPage');
            }
        });

    }
});