joshbooker/Customer.lsml.js

## Customer.lsml.js
/// <reference path="~/GeneratedArtifacts/viewModel.js" />

myapp.Customer.created = function (entity) {
    // Write code here.

};

myapp.Customer.CSZ_Compute = function (entity, result) {
    // Write code here.
    var Me = entity;
    result = Me.City + ', ' + Me.State + "  " + Me.Zip;
    return result;
};

## default.htm
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="msapplication-TileImage" content="Content/Images/user-logo-144.png" />
    <meta name="msapplication-TileColor" content="#0072c6" />
    <link rel="icon" href="Content/Images/user-logo.ico" type="image/x-icon" />

    <title>HTMLApp101.HTMLClient</title>

    <script type="text/javascript">
        // Work around viewport sizing issue in IE 10 on Windows Phone 8
        if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
            document.writeln("<style>@-ms-viewport { width: auto!important; }</style>");
        }
    </script>

    <!-- Change light-theme-2.5.0.css and msls-light-2.5.0.css to dark-theme-2.5.0.css and msls-dark-2.5.0.css respectively to use the
         dark theme.  Alternatively, you may replace light-theme-2.5.0.css with a custom jQuery Mobile theme. -->
    <link rel="stylesheet" type="text/css" href="Content/light-theme-2.5.0.css" />
    <link rel="stylesheet" type="text/css" href="Content/msls-light-2.5.0.css" />

    <link rel="stylesheet" type="text/css" href="Content/jquery.mobile.structure-1.3.0.min.css" />
    <link rel="stylesheet" type="text/css" href="Content/msls-2.5.0.min.css" />

    <!-- Default font, header, and icon styles can be overriden in user-customization.css -->
    <link rel="stylesheet" type="text/css" href="Content/user-customization.css"/>
</head>
<body>
    <div id="msls-id-app-loading" class="ui-body-a msls-layout-ignore">
        <div class="msls-app-loading-img"></div>
        <span class="ui-icon ui-icon-loading"></span>
        <div class="ui-bottom-load">
            <div>HTMLApp101.HTMLClient</div>
        </div>
    </div>

    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
    <script type="text/javascript" src="Scripts/winjs-1.0.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.mobile-1.3.0.min.js"></script>
    <script type="text/javascript" src="Scripts/datajs-1.1.1.min.js"></script>
    <script type="text/javascript" src="Scripts/Generated/resources.js"></script>
    <script type="text/javascript" src="Scripts/msls-2.5.0.js"></script>
    <script type="text/javascript" src="Scripts/Generated/generatedAssets.js"></script>

    <!-- ADD THIS SCRIPT REFERENCE LAST -->
    <script type="text/javascript" src="scripts/odatareadpatch.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            msls._run()
            .then(null, function failure(error) {
                alert(error);
            });
        });
    </script>
</body>
</html>

## ODataReadPatch.js

/*
This script patches the OData read method
enabling us to inject operations before the results return to the LS runtime
*/
var origJsonReadFunc = OData.jsonHandler.read;
OData.jsonHandler.read = function (response, context) {
    var result = origJsonReadFunc.call(OData.jsonHandler, response, context);
    var data = response.data, results = data.results;
    if (results) {
        results.forEach(function (entity) {
            //do stuff to each entity here

            //call function to add Computed properties
            myapp.addComputedProperties.call(this, entity);

        });
    }

    return result;
};

myapp.addComputedProperties = function (entity) {

    //get entity name  ie: "LightSwitch.Customer" = "Customer"
    var entityType = entity.__metadata.type.split(".").pop();

    //get the entity class - this object contains all methods defined in Customer.lsml.js
    var entityClass = myapp[entityType]

    //build an array of property names from '_Compute' methods
    var properties = [];
    for (var p in entityClass) {
        if (typeof entityClass[p] === "function" && p.indexOf("_Compute") > 0) {
            prop = { name: p.split("_")[0], type: String };
            properties.push(prop);
        }
    };
    //console.log(properties);

    //add the computed prop to this entity by calling the _Compute method
    if (properties) {
        properties.forEach(function (entry) {
            var entryName = entry.name;
            var computeMethod = entityClass[entryName + "_Compute"];
            entity[entryName] = computeMethod.call(this, entity);
        });
    }
    /*entry.get = function () {
              return entry.getValue(this.details);
                    };*/
};
	/// <reference path="~/GeneratedArtifacts/viewModel.js" />

	myapp.Customer.created = function (entity) {
	// Write code here.

	};

	myapp.Customer.CSZ_Compute = function (entity, result) {
	// Write code here.
	var Me = entity;
	result = Me.City + ', ' + Me.State + " " + Me.Zip;
	return result;
	};
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=10" />
	<meta name="HandheldFriendly" content="true" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="msapplication-TileImage" content="Content/Images/user-logo-144.png" />
	<meta name="msapplication-TileColor" content="#0072c6" />
	<link rel="icon" href="Content/Images/user-logo.ico" type="image/x-icon" />

	<title>HTMLApp101.HTMLClient</title>

	<script type="text/javascript">
	// Work around viewport sizing issue in IE 10 on Windows Phone 8
	if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
	document.writeln("<style>@-ms-viewport { width: auto!important; }</style>");
	}
	</script>

	<!-- Change light-theme-2.5.0.css and msls-light-2.5.0.css to dark-theme-2.5.0.css and msls-dark-2.5.0.css respectively to use the
	dark theme. Alternatively, you may replace light-theme-2.5.0.css with a custom jQuery Mobile theme. -->
	<link rel="stylesheet" type="text/css" href="Content/light-theme-2.5.0.css" />
	<link rel="stylesheet" type="text/css" href="Content/msls-light-2.5.0.css" />

	<link rel="stylesheet" type="text/css" href="Content/jquery.mobile.structure-1.3.0.min.css" />
	<link rel="stylesheet" type="text/css" href="Content/msls-2.5.0.min.css" />

	<!-- Default font, header, and icon styles can be overriden in user-customization.css -->
	<link rel="stylesheet" type="text/css" href="Content/user-customization.css"/>
	</head>
	<body>
	<div id="msls-id-app-loading" class="ui-body-a msls-layout-ignore">
	<div class="msls-app-loading-img"></div>
	<span class="ui-icon ui-icon-loading"></span>
	<div class="ui-bottom-load">
	<div>HTMLApp101.HTMLClient</div>
	</div>
	</div>

	<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
	<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
	<script type="text/javascript" src="Scripts/winjs-1.0.min.js"></script>
	<script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="Scripts/jquery.mobile-1.3.0.min.js"></script>
	<script type="text/javascript" src="Scripts/datajs-1.1.1.min.js"></script>
	<script type="text/javascript" src="Scripts/Generated/resources.js"></script>
	<script type="text/javascript" src="Scripts/msls-2.5.0.js"></script>
	<script type="text/javascript" src="Scripts/Generated/generatedAssets.js"></script>

	<!-- ADD THIS SCRIPT REFERENCE LAST -->
	<script type="text/javascript" src="scripts/odatareadpatch.js"></script>

	<script type="text/javascript">
	$(document).ready(function () {
	msls._run()
	.then(null, function failure(error) {
	alert(error);
	});
	});
	</script>
	</body>
	</html>

	/*
	This script patches the OData read method
	enabling us to inject operations before the results return to the LS runtime
	*/
	var origJsonReadFunc = OData.jsonHandler.read;
	OData.jsonHandler.read = function (response, context) {
	var result = origJsonReadFunc.call(OData.jsonHandler, response, context);
	var data = response.data, results = data.results;
	if (results) {
	results.forEach(function (entity) {
	//do stuff to each entity here

	//call function to add Computed properties
	myapp.addComputedProperties.call(this, entity);

	});
	}

	return result;
	};

	myapp.addComputedProperties = function (entity) {

	//get entity name ie: "LightSwitch.Customer" = "Customer"
	var entityType = entity.__metadata.type.split(".").pop();

	//get the entity class - this object contains all methods defined in Customer.lsml.js
	var entityClass = myapp[entityType]

	//build an array of property names from '_Compute' methods
	var properties = [];
	for (var p in entityClass) {
	if (typeof entityClass[p] === "function" && p.indexOf("_Compute") > 0) {
	prop = { name: p.split("_")[0], type: String };
	properties.push(prop);
	}
	};
	//console.log(properties);

	//add the computed prop to this entity by calling the _Compute method
	if (properties) {
	properties.forEach(function (entry) {
	var entryName = entry.name;
	var computeMethod = entityClass[entryName + "_Compute"];
	entity[entryName] = computeMethod.call(this, entity);
	});
	}
	/*entry.get = function () {
	return entry.getValue(this.details);
	};*/
	};