Skip to content

Instantly share code, notes, and snippets.

@OdeToCode
Created May 22, 2018 16:19
Show Gist options
  • Save OdeToCode/e9ee47fb386483d056ed9f4569ae8f17 to your computer and use it in GitHub Desktop.
Save OdeToCode/e9ee47fb386483d056ed9f4569ae8f17 to your computer and use it in GitHub Desktop.
Showing videos
@{
ViewBag.Title = "Home Page";
}
Route: @Url.RouteUrl("DefaultApi", new { httproute= "", controller = "Videos" })
<div id="videoTableOutput">
</div>
@*Handlebars template*@
<script id="videoTable" type="text/html">
<table>
<thead>
<th>Title</th>
<th>Length</th>
<th></th>
</thead>
<tbody>
{{#each video}}
<tr data-id={{Id}}>
<td>{{Title}}</td>
<td>{{Length}}</td>
<td>
<button class="editVideo">Edit</button>
<button class="deleteVideo">Edit</button>
</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
@section scripts {
<script src="~/Scripts/handlebars.js"></script>
<script>
var videoServer = (function () {
var videoApiUrl = '@Url.RouteUrl("DefaultApi",new { httproute="", controller = "videos" })';
// ajax error handler
$(document).ajaxError(function (event, xhr) {
alert(xhr.status + ": " + xhr.statusText);
});
// $ = invoke jQuery
var getVideos = function () {
return $.ajax(videoApiUrl);
};
return {
getVideos: getVideos,
};
}());
(function () {
// var to hold compiled handlebars templates
var templates = {};
var compileTemplates = function () {
templates.videoTable = Handlebars.compile($("#videoTable").html());
};
// data = http request data containing videos
// put data into template and render to div
var showAllVideos = function (data) {
var output = templates.videoTable({ video: data });
$("#videoTableOutput").html(output);
};
var refreshVideos = function () {
videoServer.getVideos().done(showAllVideos);
};
// wire up DOM-ready event
$(function () {
compileTemplates();
refreshVideos();
});
}());
</script>
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment