83
rated 0 times
[
89]
[
6]
/ answers: 1 / hits: 20645
/ 12 Years ago, thu, october 25, 2012, 12:00:00
This question is a bit of a stretch of my JS skills, so I might explain it like an idiot.
Here is my JavaScript to get the json from the server, and try to push it into a template:
//Server Interface Start
//Access the web api for The User:
var lucidServer = (function () {
//global error handler
$(document).ajaxError(function (event, xhr) {
alert(xhr.status + : + xhr.statusText);
});
//client Calls
var getClients = function (id) {
return $.ajax(clientUrl + /list/ + id)
};
var getClient = function (id) {
return $.ajax(clientUrl + /details/ + id)
};
//push them out to the world!
return {
getClients: getClients,
getClient: getClient,
};
}());
//Server Interface End
(function () {
//list of clients
var refreshClients = function () {
lucidServer.getClients(1).done(showAllClients);
};
var showAllClients = function (templateInput) {
var source;
var template;
var path = '../Templates/indexTemplates.html'
$.ajax({
url: path,
cache: true,
success: function (data) {
source = data;
template = Handlebars.compile(source);
$('#clientListOutput').html(template(templateInput));
}
});
};
$(function () {
refreshClients();
});
}());
GetClients works fine and returns the Json data I am expecting. When I inspect the templateInput it is showing what I expect.
Here is the external template:
<script id=clientList type=text/html>
<div id=clients>
{{#each client}}
<span data-id={{this.iD}} />
<div>
<p>{{this.iD}}</p>
<p>{{this.name}}</p>
</div>
{{/each}}
</div>
</script>
What I am ultimately aiming to do is hold either all my templates in one html file that I can call by script id, or have each template be its own file that I can call. When I run this page nothing is showing up, there's no error or anything. Here is the entire index page:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class=no-js lt-ie9 lt-ie8 lt-ie7> <![endif]-->
<!--[if IE 7]> <html class=no-js lt-ie9 lt-ie8> <![endif]-->
<!--[if IE 8]> <html class=no-js lt-ie9> <![endif]-->
<!--[if gt IE 8]><!-->
<html class=no-js>
<!--<![endif]-->
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1>
<title></title>
<meta name=description content=>
<meta name=viewport content=width=device-width />
<link rel=stylesheet href=../../Content/normalize.css>
<link rel=stylesheet href=../../Content/main.css>
<script src=../../scripts/libs/modernizr-2.6.2.min.js></script>
</head>
<body>
<!--[if lt IE 7]>
<p class=chromeframe>You are using an <strong>outdated</strong> browser. Please <a href=http://browsehappy.com/>upgrade your browser</a> or <a href=http://www.google.com/chromeframe/?redirect=true>activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<section id=Application>
<div id=clientListOutput>
</div>
<div id=clientCreateOutput>
</div>
</section>
<footer>
</footer>
<script src=//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js></script>
<script>window.jQuery || document.write('<script src=../../scripts/libs/jquery-1.8.2.min.js></script>')</script>
<script src=../../scripts/plugins.js></script>
<script src=../../scripts/main.js></script>
<script type=text/javascript src=../../Scripts/libs/handlebars.js></script>
<script>
var freelancerUrl = '@Url.RouteUrl(ApiControllerAndIntegerId, new { httproute=, controller = Freelancer})';
var clientUrl = '@Url.RouteUrl(ApiControllerAction, new { httproute=, controller = Client})';
var projectUrl = '@Url.RouteUrl(ApiControllerAction, new { httproute=, controller = Project})';
var storyUrl = '@Url.RouteUrl(ApiControllerAndIntegerId, new { httproute=, controller = Story})';
</script>
<script type=text/javascript src=../../Scripts/serverInterface.js></script>
</body>
</html>
Edit
I changes the way my template looks slightly. Through debugging the js in Chrome tools it is telling me that 'data' is undefined in the ajax success line within showallclients.
More From » html
