$(function () {
var stock = {
cusip: 12345,
symbol: "MSFT",
name: "Microsoft",
bid: 45.92,
ask: 46.99
};
$("#cusip").text(stock.cusip);
$("#symbol").text(stock.symbol);
$("#name").text(stock.name);
$("#bid").val(stock.bid);
$("#ask").val(stock.ask);
ko.applyBindings(stock);
})
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title" data-bind="text: name + ' - using jQuery'"></h3>
</div>
<div class="panel-body">
<div class="form-group">
<span>cusip #: </span><span id="cusip"></span><br />
<span>symbol: </span><span id="symbol"></span><br />
<div class="form-group">
<span>bid: </span><input id="bid" />
</div>
<div class="form-group">
<span>ask: </span><input id="ask" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title" data-bind="text: name + ' - using knockout!'"></h3>
</div>
<div class="panel-body">
<div class="form-group">
<span>cusip #: </span><span data-bind="text: cusip"></span><br />
<span>symbol: </span><span data-bind="text: symbol"></span><br />
<div class="form-group">
<span>bid: </span><input data-bind ="value: bid" />
</div>
<div class="form-group">
<span>ask: </span><input data-bind="value: ask" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>© 2014 Sebastian Brukalo <a href="http://sebastianbrukalo.blogspot.com/">http://sebastianbrukalo.blogspot.com/</a></p>
</footer>
External resources loaded into this fiddle: