Fun with knockout - binding

Fun with knockout - binding

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
 <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>
                        ...

JavaScript

$(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);
        })