<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script data-require="knockout@*" data-semver="3.0.0" src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer="defer"></script>
</head>
<body>
<h1>Usando MVVM</h1>
<form name="criaModelo" method="post" action="">
<h2>Associando Instruções</h2>
<label for="txtId">ID</label>
<input type="text" id="txtId" data-bind="value: id" />
<label for="txtOrdem">Ordem:</label>
<input type="text" id="txtOrdem" data-bind="value: ordem"/>
<button data-bind="click: incluirNovo">+</button>
<h2>Relação de itens</h2>
<ul data-bind="foreach: registros(), visible: registros().length > 0">
<li>ID: <span data-bind="text: id"></span> - Ordem:<span data-bind="text: ordem"></span></li>
</ul>
<span data-bind="visible: registros().length===0">Ainda não existem itens registrados.</span>
<h3>debug</h3>
<pre data-bind="text: ko.toJSON($data, null, 3)"></pre>
</form>
</body>
</html>
// Code goes here
var
minhaView = {
//lista de registros
registros: ko.observableArray([]),
id: ko.observable(""),
ordem: ko.observable(""),
incluirNovo: function(el) {
//incluo na lista
this.registros.push({id: this.id(),ordem: this.ordem()});
//limpo textboxes
this.id(""), this.ordem("");
}
}
ko.applyBindings(minhaView);
/* Styles go here */