subscriberServices.js

var SubscriberServicesPage = extend.Page({
    delegatedEvents: {
        "click [id^='js_#service_id_']": "manageService",
        "click #js_save_services_changes": "saveChanges"
    },

    initializeServicesList: function () {
        var that = this;
        $("[id^='" + this.jsServiceRowIdPrefix + "']").each(function () {
            var $serviceRow = $(this);
            var serviceId = $serviceRow.data('id');
            that.servicesStatus.push(new ServiceStatus({
                serviceId: serviceId,
                enabled: $serviceRow.hasClass('js-active')
            }));
        })
    },


    manageService: function (evt) {
        var serviceId = evt.$el.data('id');
        var foundServiceStatus = _.findWhere(this.servicesStatus, {serviceId: serviceId});
        var index = this.servicesStatus.indexOf(foundServiceStatus);
        this.servicesStatus[index].changed = !evt.$el.data('enabled') == evt.$el.is(':checked');
        this.changeSaveButtonStatus();

    },

    changeSaveButtonStatus: function () {
        var isAnyChanged = _.some(this.servicesStatus, function (item) {
            return item.changed;
        });
        if (isAnyChanged) {
            $(this.jsSaveChangesButtonSelector).removeClass(this.jsSaveChangesButtonInactiveClass);
        } else {
            $(this.jsSaveChangesButtonSelector).addClass(this.jsSaveChangesButtonInactiveClass);
        }
    },

    saveChanges: function (evt) {
        $.ajax({
            url: "/services/manageAll",
            data: JSON.stringify({
                serviceIds: _.filter(evt.that.servicesStatus, function (item) {
                    return item.changed == true;
                })
            }),
            method: 'post',
            contentType: 'application/json'
        }).success(function (data) {
            window.location = "/services/main"
        }).error(function () {
            console.log("something happened while saving changes at services page")
        })
    }
});

var ServiceStatus = function (options) {
    return {
        "serviceId": options.serviceId,
        /**
         * true means enabled; false not
         */
        "enabled": options.enabled,
        /**
         * by default it is false
         */
        "changed": options.changed || false
    }
};


$(document).ready(function () {
    window.subscriberPage = new SubscriberServicesPage({
        jsRowActiveClasses: [
            "active",
            "js-active"
        ],
        jsServiceRowIdPrefix: "js-service-row_id_",
        jsServiceCheckBoxIdPrefix: "js_#service_id_",
        jsSaveChangesButtonSelector: "#js_save_services_changes",
        jsSaveChangesButtonInactiveClass: "inactive",
        servicesStatus: []
    });
    subscriberPage.initialize();
    subscriberPage.initializeServicesList();
});