From ab573b66dcc0de931df5913b9962f68d4f0a52c3 Mon Sep 17 00:00:00 2001 From: Seboo Date: Wed, 21 Aug 2013 02:25:04 -0300 Subject: [PATCH] Added definitions for Knockout-ES5 plugin --- knockout.es5/knockout.es5-tests.ts | 77 ++++++++++++++++++++++++++++++ knockout.es5/knockout.es5.d.ts | 14 ++++++ 2 files changed, 91 insertions(+) create mode 100644 knockout.es5/knockout.es5-tests.ts create mode 100644 knockout.es5/knockout.es5.d.ts diff --git a/knockout.es5/knockout.es5-tests.ts b/knockout.es5/knockout.es5-tests.ts new file mode 100644 index 000000000..f8faf9529 --- /dev/null +++ b/knockout.es5/knockout.es5-tests.ts @@ -0,0 +1,77 @@ +/// + +var empty = {}, + obj = { a: 'string', b: 123, c: true, d: empty }, + observable = ko.observable(123), + computed = ko.computed(function () { return observable() + 1; }), + model = { prop: 100 }, + notifiedValues = []; + + +// Basic properties +ko.track(empty); +ko.track(null); +ko.track(obj); +ko.track({ a: 1 }); +ko.track({ prop: observable }); +ko.track({ prop: computed }); +ko.track({ a: 1, b: 2, c: 3 }, null); +ko.track({ a: 1, b: 2, c: 3 }, []); +ko.track({ a: 1, b: 2, c: 3 }, ['a', 'c']); +ko.track({ prop: observable }, ['prop']); +ko.track({ prop: computed }, ['prop']); +ko.track(null, null); +ko.track(model); + +// Computed properties +ko.defineProperty(model, 'propPlusOne', () => { return model.prop + 1; }); +ko.defineProperty(model, 'propOne', { get: function () { return 1; } }); +ko.defineProperty(model, 'propPlusOne', { get: () => model.prop++, set: (value) => model.prop = value - 1 }); + +// Utility functions +ko.getObservable(model, 'propPlusOne').subscribe((newValue) => notifiedValues.push(newValue)); + + +// Simple usage example +class OrderLine { + subtotal: string; + + constructor(public item: any, public price: number, public quantity: number) { + // Instead of declaring ko.observable properties, we just have one call to ko.track + ko.track(this); + + // Computed property + ko.defineProperty(model, 'subtotal', () => { + return "$" + (this.price * this.quantity).toFixed(2); + }); + + // Accessing the observables + ko.getObservable(this, "price").subscribe(function (newPrice) { + console.log('The new price is ' + newPrice); + }); + } + + public getSubtotal(): string { + return "$" + (this.price * this.quantity).toFixed(2); + } +} + +class Order { + lines: Array = []; + + constructor() { + ko.track(this, ["lines"]); + } +} + +var someOrderLine = new OrderLine(null, 0.445, 11), anOrder = new Order(); + +someOrderLine.item = "Test Item"; +someOrderLine.quantity += 1; + +anOrder.lines.push(someOrderLine); +anOrder.lines.push(someOrderLine); +anOrder.lines.shift(); + +console.log(someOrderLine.subtotal == someOrderLine.getSubtotal()); // true +console.log(anOrder.lines.length); // 1 diff --git a/knockout.es5/knockout.es5.d.ts b/knockout.es5/knockout.es5.d.ts new file mode 100644 index 000000000..ffd1cffa0 --- /dev/null +++ b/knockout.es5/knockout.es5.d.ts @@ -0,0 +1,14 @@ +// Type definitions for Knockout-ES5 +// Project: https://github.com/SteveSanderson/knockout-es5 +// Definitions by: Sebastián Galiano +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +interface KnockoutStatic { + track(obj: any, propertyNames?: Array): any; + defineProperty(obj: any, propertyName: string, evaluator: Function): any; + defineProperty(obj: any, propertyName: string, options: { get: () => any; set?: (value: any) => void; }): any; + getObservable(obj: any, propertyName: string): KnockoutObservable; + valueHasMutated(obj: any, propertyName: string): void; +} \ No newline at end of file