Showing videos

index.cshtml

@{
    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>

}