Bindings: the zen of montage

699 views
657 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
699
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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
  6. 6. Property Changesobject.addOwnPropertyChangeListener (key, handler, token)handler.handleTokenChange (value, key, object)add/removepropertyChange/beforePropertyChangetokenChange/tokenWillChange
  7. 7. Map Changesobject.addMapChangeListener (handler, token) (any key)handler.handleTokenMapChange (value, key, object)add/removemapChange/beforeMapChangemapChange/mapWillChange
  8. 8. Range Changesobject.addRangeChangeListener (handler, token)handler.handleTokenRangeChange (plus, minus, index)add/removerangeChange/beforeRangeChangerangeChange/rangeWillChange
  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

×