bahattincinic/gist:5a8399ac0ca6d911c374

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
    <title>Firebase & Knockout Test</title>
    <link rel="stylesheet" type="text/css"
          href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://cdn.firebase.com/v0/firebase.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
    <script type="text/javascript"
            src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript"
            src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
    <script type="text/javascript">
        var FirebaseModel = function () {
            var self = this;
            self.rows = ko.observableArray([]);
            self.type = ko.observable('');
            self.title = ko.observable('');
            self.init = function (token) {
                var reference = token.child('orders');
                reference.on('value', function (snapshot) {
                    var vals = _.where(snapshot.val(), {'statu': self.type()})
                    self.rows(vals);
                });
            };
        };

        var Dashboard = function () {
            var self = this;
            self.instances = ko.observableArray([]);
            self.token = ko.observable();

            self.register = function (type, title) {
                var instance = new FirebaseModel();
                instance.title(title);
                instance.type(type);
                instance.init(self.getToken());
                self.instances.push(instance);
            };

            self.getToken = function () {
                if (self.token()) {
                    return self.token();
                } else {
                    self.token(new Firebase('<FIREBASE URL>'));
                    return self.token();
                }
            }
        };

        var firebaseDashboard = new Dashboard();
        $(function () {
            ko.applyBindings(firebaseDashboard);
            firebaseDashboard.register(1, 'Onay Bekliyor');
            firebaseDashboard.register(2, 'Kargolanmayi Bekliyor');
        });
    </script>
</head>
<body>
<div class="container">
    <h1 class="page-header">Dashboard</h1>
    <!-- ko foreach: $root.instances -->
    <button type="button" class="btn btn-default btn-lg">
        <span data-bind="text: title() + ' (' + rows().length + ')'"></span>
    </button>
    <!-- /ko -->

    <table class="table">
        <thead>
        <tr>
            <th>Kargo Numarasi</th>
            <th>Siparis Verilme Tarihi</th>
            <th>Durum</th>
        </tr>
        </thead>
        <tbody>
        <!-- ko foreach: $root.instances -->
        <!-- ko foreach: $data.rows -->
        <tr>
            <td data-bind="text: order_number"></td>
            <td data-bind="text: created_at"></td>
            <td data-bind="text: $parent.title"></td>
        </tr>
        <!-- /ko -->
        <!-- /ko -->
        </tbody>
    </table>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Firebase & Knockout Test</title>
	<link rel="stylesheet" type="text/css"
	href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<script src="https://cdn.firebase.com/v0/firebase.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
	<script type="text/javascript"
	src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script type="text/javascript"
	src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
	<script type="text/javascript">
	var FirebaseModel = function () {
	var self = this;
	self.rows = ko.observableArray([]);
	self.type = ko.observable('');
	self.title = ko.observable('');
	self.init = function (token) {
	var reference = token.child('orders');
	reference.on('value', function (snapshot) {
	var vals = _.where(snapshot.val(), {'statu': self.type()})
	self.rows(vals);
	});
	};
	};

	var Dashboard = function () {
	var self = this;
	self.instances = ko.observableArray([]);
	self.token = ko.observable();

	self.register = function (type, title) {
	var instance = new FirebaseModel();
	instance.title(title);
	instance.type(type);
	instance.init(self.getToken());
	self.instances.push(instance);
	};

	self.getToken = function () {
	if (self.token()) {
	return self.token();
	} else {
	self.token(new Firebase('<FIREBASE URL>'));
	return self.token();
	}
	}
	};

	var firebaseDashboard = new Dashboard();
	$(function () {
	ko.applyBindings(firebaseDashboard);
	firebaseDashboard.register(1, 'Onay Bekliyor');
	firebaseDashboard.register(2, 'Kargolanmayi Bekliyor');
	});
	</script>
	</head>
	<body>
	<div class="container">
	<h1 class="page-header">Dashboard</h1>
	<!-- ko foreach: $root.instances -->
	<button type="button" class="btn btn-default btn-lg">
	<span data-bind="text: title() + ' (' + rows().length + ')'"></span>
	</button>
	<!-- /ko -->

	<table class="table">
	<thead>
	<tr>
	<th>Kargo Numarasi</th>
	<th>Siparis Verilme Tarihi</th>
	<th>Durum</th>
	</tr>
	</thead>
	<tbody>
	<!-- ko foreach: $root.instances -->
	<!-- ko foreach: $data.rows -->
	<tr>
	<td data-bind="text: order_number"></td>
	<td data-bind="text: created_at"></td>
	<td data-bind="text: $parent.title"></td>
	</tr>
	<!-- /ko -->
	<!-- /ko -->
	</tbody>
	</table>
	</div>
	</body>
	</html>