BB: Sockets and Collections

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<div class="cols">
    <div class="js-one">
        <b>Stocks 1</b>
    </div>
    <div class="js-two">
        <b>Stocks 2</b>
    </div>
</div>

<script type="text/x-handlebars-template" class="tmpl-stock">
    <span>{{account}}</span>
    <span>{{clOrdId}}</span>
    <span>{{price}}</span>
</script>

SCSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

.cols {
    display: flex;
    justify-content: space-around;
}

li {
    margin: 10px 0;
}

JavaScript

console.clear();

var stockDataOne = {
    "action": "order/search",
    "requestID": "e7ca64ab-d6cd-3a76-0d8a-1af38de9f87b",
    "status": "SUCCESS",
    "type": "orderSearchResponse",
    "payload": [{
        "account": "TEST_ACCOUNT",
        "clOrdId": "NEWTEST7",
        "correlationClOrdId": "YXU1551",
        "eventId": "71201494",
        "micCode": "XCBT",
        "marketSegmentId": 70,
        "maxShowQty": 8,
        "orderId": 7032685938,
        "orderType": "limit",
        "price": 448.75,
        "quantity": 2,
        "remainingQty": 8,
        "productId": "ZCZ6",
        "senderCompId": "YXU100",
        "senderLocationId": "Brio",
        "senderSubId": "DUMMY",
        "sessionId": "YXU",
        "side": "buy",
        "symbol": "ZC",
        "timeInForce": "gtc",
        "traderId": "SHT1",
        "transactTime": 1467130830831,
        "displayPrice": "4486",
        "isCancel": "true"
    }, {
        "account": "TEST ONE",
        "clOrdId": "YX2451",
        "correlationClOrdId": "YX2451",
        "eventId": "84899502",
        "micCode": "XNYM",
        "marketSegmentId": 82,
        "maxShowQty": 40,
        "orderId": 8237617666,
        "orderType": "limit",
        "price": 5161,
        "quantity": 10,
        "remainingQty": 40,
        "productId": "CLZ7",
        "senderCompId": "YX2100",
        "senderLocationId": "Brio",
        "senderSubId": "HRI_HRI",
        "sessionId": "YX2",
        "side": "buy",
        "symbol": "CL",
        "timeInForce": "gtc",
        "traderId": "SHT1",
        "transactTime": 1467055117006,
        "displayPrice": "5161",
        "isCancel": "true"
    }, {
        "account": "TEST_MIGUEL",
        "clOrdId": "YX2405",
        "correlationClOrdId": "YX2405",
        "eventId": "84909448",
        "micCode": "XNYM",
        "marketSegmentId": 82,
        "maxShowQty": 6,
        "orderId": 8237617653,
        "orderType": "limit",
        "price": 5030,
        "quantity": 44,
       ...