Successfully reported this slideshow.
Upcoming SlideShare
×

# Bindings: the zen of montage

874 views

Published on

Published in: Technology
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

• Be the first to like this

### Bindings: the zen of montage

1. 1. Bindings The Zen of Montagesch, @benoitmarchant, @montagejs
2. 2. function Point(x, y) { this.x = x; this.y = y;}Point.prototype.magnitude = function () { return Math.sqrt( this.x * this.x + this.y * this.y );};var point = new Point(3, 4);expect(point.magnitude()).toEqual(5);
3. 3. var Montage = require("montage").Montage;var Point = Montage.create(Montage, { didCreate: { value: function () { this.addOwnPropertyChangeListener("x", this, "coordinate"); this.addOwnPropertyChangeListener("y", this, "coordiante"); } }, handleCoordinateChange: { value: function () { if (this.x == null || this.y == null) { this.magnitude = null; } else { this.magnitude = Math.sqrt( this.x * this.x + this.y * this.y ); } } }});var point = Point.create();point.x = 3;point.y = 4;expect(point.magnitude).toEqual(5);
4. 4. var Montage = require("montage").Montage;var Point = Montage.create(Montage, { didCreate: { value: function () { this.defineBinding("magnitude", { "<-": "(x ** 2 + y ** 2) // 2" }); } }});var point = Point.create();point.x = 3;point.y = 4;expect(point.magnitude).toEqual(5)
5. 5. Discrete Change Listeners● property changes● range changes● map changes
9. 9. Array Range Changesshift() → splice(0, 1)unshift(...values) → splice(0, 0, ...values)push(...values) → splice(length, 0, ...values)pop() → splice(length - 1, 1)clear() → splice(0, length)set(index, value) → splice(index, 1, value)swap(i, l, values) → splice(i, l, ...values)
10. 10. © Sidney Harris — http://www.sciencecartoonsplus.com/
11. 11. Bindingsa↔b a.has(b) ↔ ca.b ↔ c.d a == b ↔ ca ← b.map{c} a[b] ↔ ca ← b.filter{c} a.* ← c.map{d}a ← b.sorted{c} a[*] ← b.toMap()a ← b.flatten() a ← b.toMap{[.0, .1]}sum, average, r ← (x**2 + y**2) //2reversed, enumerate, f ↔ c * 1.8 + 32items, some, every a ← b.{x: .0, y: .1}
12. 12. Pipelines http://montagejs.github.com/frb/grammar.xhtml
13. 13. http://montagejs.github.com/frb/grammar.xhtml
14. 14. Insert Demo Here
15. 15. a.b ↔ c.dthis.defineBinding("a.b", { "<->": "c.d"});{ "prototype": "montage", "bindings": { "a.b": {"<->": "c.d"} }}
16. 16. "selectionName": { "prototype": "montage/ui/dynamic-text.reel", "properties": { "element": {"#": "selectionName"} }, "bindings": { "value": { "<-": " @selection.currentIteration.object.name + ( !@selection.currentIteration.isLast ? , : ) " } }}
17. 17. // Repetition.Iteration// didCreate:this.defineBinding("isLast", { "<-": " visibleIndex == repetition.iterations.length - 1 "});
18. 18. // ContentController.Iteration// didCreate:this.defineBinding("selected", { "<->": "controller.selection.has(object)"});
19. 19. Insert More Awesomer Demo Here
20. 20. "valueInput": { "prototype": "montage/ui/input-text.reel", "properties": { "element": {"#": "valueInput"} }, "bindings": { "value": { "<->": " @owner.data [+@rowInput.value] [+@columnInput.value] " } }}
21. 21. function observeProperty(object, key, emit, source, parameters) { var cancel = Function.noop; function propertyChange(value, key, object) { cancel(); cancel = emit(value, key, object) || Function.noop; } PropertyChanges.addOwnPropertyChangeListener( object, key, propertyChange ); propertyChange(object[key], key, object); return once(function cancelPropertyObserver() { cancel(); PropertyChanges.removeOwnPropertyChangeListener( object, key, propertyChange ); });}
22. 22. exports.makeSumObserver = makeCollectionObserverMaker( function setup() { var sum = 0; return function rangeChange(plus, minus, index) { sum += plus.sum() - minus.sum(); return sum; }; });
23. 23. Upcoming Changes● array.property → array.map {property}● array.count() → array.length
24. 24. Upcoming Changesthis.defineBinding(target, targetPath, { "<- or <->": boundObjectPropertyPath, source: boundObject});
25. 25. http://{github,documentup}.com/montagejs/frb
26. 26. http://{github,documentup}.com/montagejs/frb