KNOCKOUT

<!-- Importar biblioteca knockout.js -->
<script src="knockout-3.3.0.js"></script>
<!-- Exemplo de knockout js -->
<p>
<!-- This is a *view* - HTML markup that defines the appearance of your UI -->
<p>First name: <strong data-bind="text:firstName">Blablabla</strong></p>
<p>Last name: <strong data-bind="text:lastName">Blablabla</strong></p>
<script type="text/javascript">
// Este é um *viewmodel* simples - JavaScript que define os dados e o comportamento de sua interface de usuário.
function AppViewModel() {
this.firstName = "Vinicius";
this.lastName = "Coutinho";
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
</script>

<!-- Importar biblioteca knockout.js -->
<script src="knockout-3.3.0.js"></script>
<!-- Exemplo de knockout js -->
<div id="liveExample" class="liveExample">
<p>
<!-- Binding attributes declaratively link DOM elements whth model properties -->
Choose a ticket class:
<select data-bind="options: tickets, optionsCaption: "Choose...", optionsText: "name", value: chosenTicket"></select>
<button data-bind="enable: chosenTicket, click: resetTicket">Clear</button>
</p>
<p data-bind="with: chosenTicket">
Você escolheu <b data-bind="text: name"></b>
($<span data-bind="text: price"></span>)
</p>
<script type="text/javascript">
// Seu modelo de visão contém a data e os comportamentos subjacentes do Ul
function TicketsViewModel() {
this.tickets = [
{ name: "Economy", price: 199.95 },
{ name: "Business", price: 449.22 },
{ name: "First Class", price: 1199.99 }
];
this.chosenTicket = ko.observable();
this.resetTicket = function() { this.chosenTicket(null) }
}
ko.applyBindings(new TicketsViewModel(), document.getElementById("liveExample"));
// Activates Knockout
</script>
<!-- Encapsulando dado e comportamento em um modelo de visão, você tem fundação limpa e extensível no qual para construir UIs sofisticadas sem se perder em um emaranhado de manipuladores de eventos e atualizações manuais de DOM. -->
</div>