diff --git a/README.md b/README.md index f53224149..3f6874db8 100755 --- a/README.md +++ b/README.md @@ -127,6 +127,7 @@ List of Definitions * [KeyboardJS](https://github.com/RobertWHurst/KeyboardJS) (by [Vincent Bortone](https://github.com/vbortone/)) * [Knockback](http://kmalakoff.github.com/knockback/) (by [Marcel Binot](https://github.com/docgit)) * [Knockout.js](http://knockoutjs.com/) (by [Boris Yankov](https://github.com/borisyankov)) +* [Knockout.ES5](http://github.com/SteveSanderson/knockout-es5/‎) (by [Sebastián Galiano](https://github.com/sgaliano)) * [Knockout.Mapping](https://github.com/SteveSanderson/knockout.mapping) (by [Boris Yankov](https://github.com/borisyankov)) * [Knockout.Postbox](https://github.com/rniemeyer/knockout-postbox) (by [Judah Gabriel](https://github.com/JudahGabriel)) * [Knockout.Validation](https://github.com/ericmbarnard/Knockout-Validation) (by [Dan Ludwig](https://github.com/danludwig)) @@ -174,7 +175,7 @@ List of Definitions * [Spin](http://fgnass.github.com/spin.js/) (by [Boris Yankov](https://github.com/borisyankov)) * [Store.js](https://github.com/marcuswestin/store.js/) (by [Vincent Bortone](https://github.com/vbortone)) * [Sugar](http://sugarjs.com/) (by [Josh Baldwin](https://github.com/jbaldwin/)) -* [Swiper](www.idangero.us/sliders/swiper/‎) (by [Sebastián Galiano](https://github.com/sgaliano)) +* [Swiper](http://www.idangero.us/sliders/swiper/‎) (by [Sebastián Galiano](https://github.com/sgaliano)) * [SwipeView](http://cubiq.org/swipeview) (by [Boris Yankov](https://github.com/borisyankov)) * [Tags Manager](http://welldonethings.com/tags/manager) (by [Vincent Bortone](https://github.com/vbortone)) * [Teechart](http://www.steema.com) (by [Steema](http://www.steema.com)) 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