Bindings: the zen of montage

  • 417 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
417
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Bindings The Zen of Montagesch, @benoitmarchant, @montagejs
  • 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. 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. 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. Discrete Change Listeners● property changes● range changes● map changes
  • 6. Property Changesobject.addOwnPropertyChangeListener (key, handler, token)handler.handleTokenChange (value, key, object)add/removepropertyChange/beforePropertyChangetokenChange/tokenWillChange
  • 7. Map Changesobject.addMapChangeListener (handler, token) (any key)handler.handleTokenMapChange (value, key, object)add/removemapChange/beforeMapChangemapChange/mapWillChange
  • 8. Range Changesobject.addRangeChangeListener (handler, token)handler.handleTokenRangeChange (plus, minus, index)add/removerangeChange/beforeRangeChangerangeChange/rangeWillChange
  • 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. © Sidney Harris — http://www.sciencecartoonsplus.com/
  • 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. Pipelines http://montagejs.github.com/frb/grammar.xhtml
  • 13. http://montagejs.github.com/frb/grammar.xhtml
  • 14. Insert Demo Here
  • 15. a.b ↔ c.dthis.defineBinding("a.b", { "<->": "c.d"});{ "prototype": "montage", "bindings": { "a.b": {"<->": "c.d"} }}
  • 16. "selectionName": { "prototype": "montage/ui/dynamic-text.reel", "properties": { "element": {"#": "selectionName"} }, "bindings": { "value": { "<-": " @selection.currentIteration.object.name + ( !@selection.currentIteration.isLast ? , : ) " } }}
  • 17. // Repetition.Iteration// didCreate:this.defineBinding("isLast", { "<-": " visibleIndex == repetition.iterations.length - 1 "});
  • 18. // ContentController.Iteration// didCreate:this.defineBinding("selected", { "<->": "controller.selection.has(object)"});
  • 19. Insert More Awesomer Demo Here
  • 20. "valueInput": { "prototype": "montage/ui/input-text.reel", "properties": { "element": {"#": "valueInput"} }, "bindings": { "value": { "<->": " @owner.data [+@rowInput.value] [+@columnInput.value] " } }}
  • 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. exports.makeSumObserver = makeCollectionObserverMaker( function setup() { var sum = 0; return function rangeChange(plus, minus, index) { sum += plus.sum() - minus.sum(); return sum; }; });
  • 23. Upcoming Changes● array.property → array.map {property}● array.count() → array.length
  • 24. Upcoming Changesthis.defineBinding(target, targetPath, { "<- or <->": boundObjectPropertyPath, source: boundObject});
  • 25. http://{github,documentup}.com/montagejs/frb
  • 26. http://{github,documentup}.com/montagejs/frb