Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
115 lines (104 sloc) 4.07 KB
@{
ViewBag.Title = "";
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SignalR - Knockout Page</title>
@Styles.Render("~/Content/bootstrap.css")
@Styles.Render("~/Content/Site.css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/scripts/bootstrap.min.js")
<script src="~/Scripts/jquery.signalR-2.2.2.js" type="text/javascript"></script>
<script src="~/signalr/js" type="text/javascript"></script>
<script src="~/Scripts/underscore.js" type="text/javascript"></script>
<script src="~/Scripts/knockout-3.4.2.debug.js" type="text/javascript"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Signalr Examples", "Index", "Home", null, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">@Html.ActionLink("Knockout", "Index", "Home")</li>
<li>@Html.ActionLink("Angular", "Index", "HomeAngular")</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div>
<h2>Stock Price Tracker (w/ knockout)</h2>
<table class="table">
<tr>
<th>
Symbol
</th>
<th>
Price
</th>
<th>
Last Updated
</th>
</tr>
<tbody data-bind="foreach: stocks">
<tr>
<td data-bind="text: symbol"></td>
<td data-bind="text: price"></td>
<td data-bind="text: updated"></td>
</tr>
</tbody>
</table>
<a class="btn btn-link" href="@Url.Action("Index", "HomeAngular")" role="button">Go to Angular &raquo;</a>
<hr />
</div>
<footer>
<p>&copy; @DateTime.Now.Year - Jace Rhea Blog</p>
</footer>
</div>
<script type="text/javascript">
function Stock(symbol, price, updated) {
this.symbol = symbol;
this.price = ko.observable(price);
this.updated = ko.observable(updated);
};
$(function () {
var viewModel = { stocks: ko.observableArray() };
$(function () {
var demoHub = $.connection.demoHub;
demoHub.client.UpdatePrice = function (priceUpdate) {
_.chain(viewModel.stocks())
.filter(function (stock) { return stock.symbol === priceUpdate.Symbol; })
.each(function (stock) {
stock.price(priceUpdate.Price.toFixed(2));
stock.updated(new Date());
});
};
$.ajax({
url: '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "Stock" })',
success: function (data) {
// Proxy created on the fly
_.chain(data)
.each(function (stock) {
viewModel.stocks.push(new Stock(stock.Symbol, stock.Price, new Date()));
});
ko.applyBindings(viewModel);
// Start the connection
$.connection.hub.start();
}
});
});
});
</script>
</body>
</html>