application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require knockout
//= require_tree .

InvoiceLine = function() {
  this.amount = ko.observable();
  this.price = ko.observable();

  calculation = function() {
    if(this.amount() && this.price()) {
      return this.amount() * this.price()
    }
  }
  this.subtotal = ko.computed(calculation, this)
}

Invoice = function() {
  var self = this;
  this.lines = ko.observableArray();

  this.total = ko.computed(function() {
    var sum = 0;
    ko.utils.arrayForEach(self.lines(), function(line) {
      sum += line.subtotal()
    })
    return sum;
  })

  this.addEmptyLine = function() {
    self.lines.push(new InvoiceLine());
  };

  this.removeLine = function(line) {
    self.lines.remove(line);
  }
}

var invoice = new Invoice;
$(document).ready(function() {
  ko.applyBindings(invoice)
})

form.html

<%= form_for(@invoice, :class => "invoice") do |invoice_form| %>
  <% if @invoice.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@invoice.errors.count, "error") %> prohibited this invoice from being saved:</h2>

      <ul>
      <% @invoice.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= invoice_form.label :due_date %><br>
    <%= invoice_form.datetime_select :due_date %>
  </div>
  <div class="field">
    <%= invoice_form.label :recipient %><br>
    <%= invoice_form.text_area :recipient %>
  </div>

  <table>
    <tbody data-bind="foreach: lines">
      <td><input type="text" data-bind="
        attr: {
          name: 'invoice[lines_attributes][' + $index() + '][description]'
        }
      "></td>
      <td><input type="text" data-bind="
        attr: {
          name: 'invoice[lines_attributes][' + $index() + '][amount]'
        },
        value: amount
      "></td>
      <td><input type="text" data-bind="
        attr: {
          name: 'invoice[lines_attributes][' + $index() + '][price]'
        },
        value: price
      "></td>
      <td data-bind="text: subtotal"></td>
    </tbody>
    <tfoot>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td data-bind="text: total"></td>
      </tr>
    </tfoot>
  </table>

  <div class="actions">
    <%= invoice_form.submit %>
  </div>
<% end %>