sample: Knockout in Node+Express

first.ts

declare var ko: any;

class Formula {
    a: any = ko.observable(3);
    b: any = ko.observable(4);
    sum: any = ko.observable(null);

    // 'sum' is changed with this ko.computed().
    private controlSum: Function = ko.computed(() => {
        var a: number = Number(this.a()), // Don't forget to cast to number.
            b: number = Number(this.b()); // Don't forget to cast to number.

        this.sum(a + b);
    });
}

var formula = new Formula();

ko.punches.enableAll(); // *Write this before ko.applyBindings().*
ko.applyBindings(formula);

footer.ejs

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"></script>
<script src="//mbest.github.io/knockout.punches/knockout.punches.js"></script>

<script src="/js/first.js"></script>

</body>
</html>

index.ejs

<% include header %>

  <h1><%-title %></h1>
  <p>Welcome to <%-title %></p>

  <input data-bind="textInput: a" />
  <div>a = {{ a }}</div>
  
  <input data-bind="textInput: b" />
  <div>b = {{ b }}</div>
  
  <div>a + b = {{ sum }}</div>

<% include footer %>