<!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 */