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

window.Product = Backbone.Model.extend({
    defaults: {}
});

window.ProductList = Backbone.Collection.extend({
    model: Product,
    urlRoot: 'api/product/list/',
    url: function () {
        return this.urlRoot + localStorage.getItem('productcategoryid');
    }
});

window.ProductListView = Backbone.View.extend({
    el: "#jqt",
    initialize: function () {
        this.template = $('#ProductListTemplate').html();
        this.collection = new ProductList();
    },

    events: {
        'click #ProductList .orderType ul li': 'changeOrderType',
        'click #ProductList .productSampleList li': 'renderDetail',
        'click #ProductList .filter a': 'renderFilter'
    },

    render: function () {
        var that = this;
        var partial = { header: $('#HeaderTemplate').html(), footer: $('#FooterTemplate').html(),
            innerFooter: $('#InnerFooterTemplate').html(), orderCheck: $('#ThreeCheckTemplate').html()
        };
        var data = { hasBack: true, title: "??", btnListR: [{ name: 'sort' }, { name: 'cart' }, { name: 'home'}] };

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

        this.setOrderCheck();

        this.fetchProductList();

        new Plugins.SearchPlugin('#ProductList .searchContainer', {
            id: 'keyword_productlist'
        });

        return this;

    },

    fetchProductList: function () {
        var that = this;
        this.collection.fetch({
            data: {
                sorts: localStorage.getItem('orderType'),
                isASC: localStorage.getItem('isASC'),
                pageIndex: localStorage.getItem('pageIndex'),
                pageCount: 5
            },
            success: function () {
                var products = that.collection.models[0].get('Data'),
                    allCount = that.collection.models[0].get('Count');
                if (allCount == 0) {
                    var template = $('#EmptyInnerListTemplate').html();
                    $('.productSampleList').html(Mustache.render(template, [], []));
                    $('.footer').hide();
                    $('.orderType').hide();
                    return;
                }
                var template = $('#InnerListTemplate').html();
                var data = { products: products }
                $('#ProductList .productSampleList').html(Mustache.render(template, data, []));
                new Plugins.PagingPlugin('.foot-paging', {
                    allCount: allCount,
                    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('pageIndex');
        localStorage.setItem('pageIndex', +pageIndex - 1);
        this.fetchProductList();
    },

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

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

    renderDetail: function (e) {
        var target = $(e.currentTarget);

        var price = target.find('.pro-price').text(),
            productid = target.attr('productid');
        localStorage.setItem('productDetail', JSON.stringify({ productid: productid, price: price }));

        localStorage.setItem('productid', productid);
        localStorage.setItem('detailType', 'tab_intro');
        localStorage.setItem('commentPageIndex', 1);
        localStorage.setItem('ordercommentPageIndex', 1);
        pageView.goTo('ProductDetail');
    },

    renderFilter: function (e) {
        pageView.goTo('MyFilter');
    },

    setOrderCheck: function () {
        var orderType = localStorage.getItem('orderType'),
            isASC = localStorage.getItem('isASC'),
            priceClass = isASC == "true" ? 'up' : 'down',
            activeClass = 'selected',
            currentTarget = $('.orderType ').find('li[ordertype="' + orderType + '"]');
        currentTarget.addClass(activeClass).siblings().removeClass(activeClass);
        if (currentTarget.hasClass('price')) {
            currentTarget.find('a').removeClass('up down').addClass(priceClass);
        }
    },

    changeOrderType: function (e) {
        var target = $(e.currentTarget),
            activeClass = 'selected';

        if (target.hasClass(activeClass)) {
            this.changeAsc(e);
            return;
        }
        target.addClass(activeClass).siblings().removeClass(activeClass);
        if (!target.hasClass('price')) {
            $('.price').find('a').removeClass('down').addClass('up');
        }
        localStorage.setItem('orderType', target.attr('orderType'));
        localStorage.setItem('isASC', true);

        this.fetchProductList();
    },

    changeAsc: function (e) {
        var target = $(e.currentTarget),
            activeClass = 'selected';
        if (target.hasClass('price')) {
            this.changePriceImg(target);
        }

        var orderAsc = localStorage.getItem('isASC');

        localStorage.setItem('isASC', orderAsc == "true" ? false : true);

        this.fetchProductList();

    },

    changePriceImg: function (target) {
        var icon = $(target).find('a'),
            asc = icon.hasClass('up');
        if (asc) {
            icon.removeClass('up').addClass('down');
        } else
            icon.removeClass('down').addClass('up');
    }
});