Since I was previously an ASP.NET developer, I had a bit of knowledge in the Hot Towel SPA framework which serves the same purpose. Thus, I started replicating the same framework in PHP. I have successfully built the initial SPA navigation functionality for three pages in HTML, using Hot Towel SPA's js files (main.js, shell.js, breeze.js, knockout.js, require.js, shell,html, nav.html, durandal, etc.).
I currently have built three files: index.php, awards.html and awards.js. The source code for these files and the built-in framework files is,
index.php
Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<!--<link rel="stylesheet" type="text/css" href="Content/durandal.css" />-->
<link rel="stylesheet" href="Content/app.css" />
<link rel="stylesheet" type="text/css" href="Content/bootstrap-responsive.css" />
</head>
<body>
<div id="fb-root"></div>
<div id="applicationHost">
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="brand">
<span>Delaware</span>
</a>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.js"></script>
<script type="text/javascript" src="Scripts/knockout-2.2.1.js"></script>
<script type="text/javascript" src="Scripts/sammy-0.7.4.js"></script>
<script type="text/javascript" src="App/durandal/amd/require.js" data-main="App/main.js"></script>
</body>
</html>Code: Select all
require.config({
paths: {
'text': 'durandal/amd/text'
}
});
define(function (require) {
var app = require('durandal/app'),
viewLocator = require('durandal/viewLocator'),
system = require('durandal/system'),
router = require('durandal/plugins/router');
//>>excludeStart("build", true);
system.debug(true);
//>>excludeEnd("build");
app.start().then(function () {
//Replace 'viewmodels' in the moduleId with 'views' to locate the view.
//Look for partial views in a 'views' folder in the root.
viewLocator.useConvention();
//configure routing
router.useConvention();
router.mapNav("index");
router.mapNav("pages/show");
router.mapNav("pages/awards");
router.mapNav("pages/add");
router.mapNav("pages/details/:id");
app.adaptToDevice();
//Show the app by setting the root view model for our application with a transition.
app.setRoot('viewmodels/shell', 'entrance');
});
});
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Awards</title>
<style type="text/css">
body {
background-color: #333;
}
body,td,th {
color: #CCC;
font-family: "Brush Script MT";
font-size: xx-large;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<script type="text/javascript" src="../../viewmodels/movies/awards.js"></script>
<script type="text/javascript" src="knockout-2.2.1.js"></script>
</head>
<body onload="MM_preloadImages('Images/AwardsThumb.png')">
<p>Awards
</p>
<table width="899">
<tr>
<td width="428"><form id="form1" name="form1" method="post" action="awards.php">
<label for="AwardName"></label>
<input name="AwardName" type="text" id="AwardName" size="70" />
</form></td>
<td width="169" rowspan="2" align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('AwardsThumb','','Images/AwardsThumb.png',1)"><img src="Images/AwardsThumb.png" width="96" height="96" id="AwardsThumb" /></a></td>
<td width="280"> </td>
</tr>
<tr>
<td><form id="form2" name="form2" method="post" action="awards.php">
<label for="AwardDescription"></label>
<textarea name="AwardDescription" id="AwardDescription" cols="68" rows="5"></textarea>
</form></td>
<td> </td>
</tr>
<tr>
<td colspan="2"><input name="IssueOrganization" type="text" id="IssueOrganization" size="100" /></td>
<td> </td>
</tr>
<tr>
<td><input name="Date" type="text" id="IssueOrganization2" size="40" /></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"><form id="form3" name="form3" method="post" action="awards.php">
<label for="LinkWith"></label>
<textarea name="LinkWith" id="LinkWith" cols="100" rows="5"></textarea>
</form></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="right"><form id="form4" name="form4" method="post" action="awards.php">
<input type="submit" name="Save" id="Save" value="Save" />
</form></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><form id="form5" name="form5" method="post" action="awards.php">
<input type="submit" name="Portfolio" id="Portfolio" value="Portfolio" />
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
<p> </p>
</body>
</html>Code: Select all
define(function (require) {
var router = require('durandal/plugins/router');
var moviesRepository = require("repositories/moviesRepository");
return {
movieToShow: {
title: ko.observable(),
director: ko.observable()
},
activate: function (context) {
}
};
});Can anyone please tell me how do I achieve this? Information on the Hot Towel SPA framework can be found on the following links:
http://www.johnpapa.net/hottowel/ http://www.dotnetcurry.com/showarticle.aspx?ID=903
Thank you in advance.