This project is read-only.

Javascript inheritance and polymorphism instead of a jquery plugin

In this examples you can find a base javascript class that wrap the "PagingBase" object and a sub javascript class that inherits from the base javascript class. Now you will use inheritance instead of a jquery plugin.

//
// Base class
//
var BaseClass = Class.extend({
    init: function (settings) {
        var that = this;
        this.undefined;
        this.tpane1 = "gpane1";
        this.tpane2 = "gpane2";
        this.tpane3 = "gpane3";
        this.buttonSearch1 = "gsearch1";
        this.buttonSearch2 = "gsearch2";
        this.buttonPageF = "gbuttonF";
        this.buttonPageP = "gbuttonP";
        this.buttonPageN = "gbuttonN";
        this.buttonPageL = "gbuttonL";
        this.basegrid = new PagingBase();
        this.basegrid.mainpane = this.tpane2;
        this.basegrid.customCallBack = this.customAction;
        this.basegrid.deleteCallBack = this.deleteAction;
        this.basegrid.insertCallBack = this.insertAction;
        this.basegrid.updateCallBack = this.updateAction;
        this.basegrid.cancelCallBack = this.cancelAction;
        $.extend(this.basegrid, settings);
        this.basegrid.initPagingBase();
        if (this.tpane1) {
            var $formpanel = $("#" + this.tpane1 + " .viewmodel");
            if ($formpanel.length == 0)
                return;
            var formpanel = $formpanel.get(0);
            ko.cleanNode(formpanel);
            var formviewmodel = this.formViewModel();
            this.basegrid.formViewModel = formviewmodel;
            ko.applyBindings(formviewmodel, formpanel);
        };
        $("#" + this.buttonSearch1).click(function (e) {
            e.stopPropagation();
            if (that.basegrid.hasWaitingRequest() === false) {
                if (that.fsearch1) that.fsearch1(that.basegrid);
                that._setupPanel(1);
            }
            else alert("WaitingRequest");
        });
        $("#" + this.buttonSearch2).click(function (e) {
            e.stopPropagation();
            if (that.basegrid.hasWaitingRequest() === false) {
                if (that.fsearch2) that.fsearch2(that.basegrid);
                that.basegrid.loadData();
                that._setupPanel(2);
            }
            else alert("WaitingRequest");
        });
        $("#" + this.buttonPageF).click(function (e) {
            e.stopPropagation();
            that.basegrid.pageF();
        });
        $("#" + this.buttonPageP).click(function (e) {
            e.stopPropagation();
            that.basegrid.pageP();
        });
        $("#" + this.buttonPageN).click(function (e) {
            e.stopPropagation();
            that.basegrid.pageN();
        });
        $("#" + this.buttonPageL).click(function (e) {
            e.stopPropagation();
            that.basegrid.pageL();
        });      
    },

    _setupPanel: function (value) {
        if (value == 1) {
            $("#" + this.tpane1).show();
            $("#" + this.tpane2).hide();
        }
        if (value == 2) {
            $("#" + this.tpane1).hide();
            $("#" + this.tpane2).show();
        }
    },

    formViewModel: function () {

    },  

    fsearch1: function (context) {

    },

    fsearch2: function (context) {

    },

    createViewModel: function () {

    },

    customAction: function (obj) {

    },

    deleteAction: function (obj) {

    },

    insertAction: function (obj) {

    },

    updateAction: function (obj) {

    },

    cancelAction: function (obj) {

    }
});


In the javascript class below you can find the application logic, that before you had put in the global scope (windows) through the jquery plugin.

//
// Sub class
//
var SubClassPage3 = BaseClass.extend({
    init: function (settings) {
        this._super(settings);
    },

    fsearch2: function (context) {
        context.clearSearch();
        context.linqEnabled = false;

        var swhere = context.koWhereString();

        context.from("/Grid1/GetDataJson2").pagingWithSize(10).where(swhere).
                 orderBy("Country,City desc").applyTempKo(mapKnock);
    },

    formViewModel: function () {
        return {
            campo1: ko.observable(""),
            campo2: ko.observable("")
        };
    },

    deleteAction: function (obj) {
        $.ajax({ url: "/Grid1/DeleteViewModel/", type: 'post',
            data: ko.toJSON(obj.dataitemJs),
            contentType: 'application/json',
            error: function (request, state, error) {
                alert("Ajax error:" + error);
            },
            success: function (result) {
                //obj.context.refresh();
                alert(result);
            }
        });
    },

    updateAction: function (obj) {
        $.ajax({ url: "/Grid1/UpdateViewModel/", type: 'post',
            data: ko.toJSON(obj.dataitemJs),
            contentType: 'application/json',
            error: function (request, state, error) {
                obj.context.closeModifyDialogFeilure();
                alert("Ajax error:" + error);
            },
            success: function (result) {
                //obj.context.refresh();
                obj.context.closeModifyDialogSuccess();
                alert(result);
            }
        });
    },

    customAction: function (obj) {
        alert("Custom:" + obj.dataitemJs.CustomerID);
    }
});
//
// ViewModel definition
//
function mapKnock(data) {
    return ko.observableArray(ko.utils.arrayMap(data, function (item) {
            return new dataItem(item);
        })
    );
};

function dataItem(item) {
    var that = this;
    this.CustomerID = ko.observable(item.CustomerID);
    this.CompanyName = ko.observable(item.CompanyName);
    this.ContactName = ko.observable(item.ContactName);
    this.City = ko.observable(item.City);
    this.Country = ko.observable(item.Country);
};


In the global scope (windows) , now you only create the sub javascript class.

$(document).ready(function () {
    var setting = {
        container: "jlist",
        detailPanel: "gdialog1",
        detailContainer: "jlist1",
        modifyPanel: "gdialog2",
        modifyContainer: "jlist2",
        knockoutValidation: true
    };
    var grid = new SubClassPage3(setting);
});


In this way you can create an application that uses javascript inheritance and polymorphism instead of a jquery plugin, with a ajax crud knockoutjs template.


Classic page with knockout MVVM
jQuery mobile page with knockout MVVM
CRUD knockoutjs grid and MVVM pattern
jQuery mobile dynamic content with a knockoutjs template and MVC
Create a PhoneGap application using html5/javascript
How using RavenDB in a html5/javascript application
Knockoutjs and LINQ for JavaScript


Last edited Apr 24, 2012 at 11:51 PM by mastefano64, version 20

Comments

No comments yet.