0

I have a simplified object, with Forenames and Surname as "properties" and have added two prototyped functions to the object. 

var FromPageBase = function () {
    this.Forenames = null;
    this.Surname = null;
};

FromPageBase.prototype.BindTheCotrols = function () {

    // bind the controls here
    $("#textForenames").change(this.GeneralEventHandler);
    $("#textSurname").change(this.GeneralEventHandler);
    $("#buttonFromForm").click(this.GeneralEventHandler);
};


FromPageBase.prototype.GeneralEventHandler = function (evt) {

var el = evt.currentTarget
var type = evt.type;
var id = el.id
var val = el.value

console.log(id, type, val)

this.Forenames = $("#textForenames")[0].value;
this.Surname = $("#textSurname")[0].value

if (id == "buttonFromForm" && this.Forenames != null && this.Surname != null)
{
    $(":mobile-pagecontainer").pagecontainer("change", "pageTo.html", { role: "page"});
} 

}

Which resides in javascript file called fromPageController.js.

I have the basic html below. 

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="fromPageController.js"></script>
    <script>
        function loadIt() {
            FromPagController = new FromPageBase;
            FromPagController.BindTheCotrols();
        }
    </script>
</head>
<body onload="loadIt()">
    <div data-role="page" id="pageFrom">
        <div data-role="header">
            <h1>From Page</h1>
        </div>
        <div role="main" class="ui-content">
            <input name="textForenames" type="text" id="textForenames" value="" placeholder="Forenames" data-clear-btn="true" maxlength="20" />
            <input name="textSurname" type="text" id="textSurname" value="" placeholder="Surname" data-clear-btn="true" maxlength="20" />
            <button name="buttonFromForm" id="buttonFromForm" ></button>
        </div>
    </div>
</body>
</html>

When the data in either textbox changes or the button is pressed the GeneralEventHandler function is called but it seems that a new instance of FromBasePage is crated each time as any values set in FromPageBase previously are lost. Is there any way to preserve the values held in FromBasePage between js calls. The html/js is being run on mobiles and in this example the page change doesn't involve a trip to the server.

Ideally i'd like to build the object up as the user fills in a form and pass the object to another page or layer for processing.

Matt
  • 23
  • 5
  • 1
    Just use a regular object literal, there doesn't seem to be any need for a function or instances ? – adeneo Oct 13 '16 at 18:05
  • @adeneo one of the reasons for using an instance is to try and reduce the number of objects that are being created during the apps lifecycle. The code will end up being generated via tool "yuck" so being able to break it into clear chunks will also help – Matt Oct 13 '16 at 18:16
  • looks needlessly over complicated. – charlietfl Oct 13 '16 at 18:24
  • @charlietfl if it was just to achieve whats in the example it would be over complicated but there are a number of reasons for it - performance being one. [link]http://stackoverflow.com/questions/8433459/js-why-use-prototype – Matt Oct 14 '16 at 10:58

0 Answers0