Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TypeScriptでKnockoutを書いてみた

 TypeScriptでKnockoutを書いてみた

shmurakami

May 21, 2014
Tweet

More Decks by shmurakami

Other Decks in Programming

Transcript

  1. TypeScript class Greeter { name: string; constructor(name: string) { this.name

    = name; } greet(): string { return "Hello, " + this.name; } }
  2. JavaScriptだとこうなる var Greeter = (function(){ function Greeter(name) { this.name =

    name; }; Greeter.prototype.greet = function() { return “Hello, ” + this.name }; return Greeter; })();
  3. TypeScriptの採用理由 var Greeter = (function(){ function Greeter(name) { this.name =

    name; }; Greeter.prototype.greet = function() { return “Hello, ” + this.name }; return Greeter; })();
  4. var ViewModel = function() { this.taroPoint = ko.observable(60); this.jiroPoint =

    ko.observable(50); this.hanakoPoint = ko.observable(40); var data = [ {name: 'ଠ࿠', value: this.taroPoint}, {name: 'ೋ࿠', value: this.jiroPoint}, {name: 'Ֆࢠ', value: this.hanakoPoint} ]; var self = this; this.sortList = ko.computed(function() { return arraySortByValue(data); }, self, {name: true}); };
  5. <table> <thead> <tr> <th>໊લ</th> <th>ಘ఺</th> </tr> </thead> <tbody data-bind="foreach: sortList">

    <tr> <td data-bind="text: name"></td> <td data-bind="text: value"></td> </tr> </tbody> </table>
  6. interface dataType { name: string; value: KnockoutObservable<number>;} class ViewModel {

    taroPoint: KnockoutObservable<string>; jiroPoint: KnockoutObservable<string>; hanakoPoint: KnockoutObservable<string>; sortList: KnockoutComputed<dataType>; constructor() { this.taroPoint = ko.observable(“60“); this.jiroPoint = ko.observable(“50“); this.hanakoPoint = ko.observable(“40“); var data: Array<dataType> = [/*লུ*/]; var self = this; this.sortList = ko.computed((): dataType => { return self.arraySortByValue(data); }, self, {deferEvaluation: true}); } }