bindings: the zen of montage
DESCRIPTION
TRANSCRIPT
BindingsThe Zen of Montage
@kriskowal (speaking), @mikeczepiel, @aadsm, @francoisfrisch, @benoitmarchant, @montagejs
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);
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);
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)
Discrete Change Listeners
● property changes● range changes● map changes
Property Changes
object.addOwnPropertyChangeListener
(key, handler, token)
handler.handleTokenChange
(value, key, object)
add/remove
propertyChange/beforePropertyChange
tokenChange/tokenWillChange
Map Changes
object.addMapChangeListener
(handler, token) (any key)
handler.handleTokenMapChange
(value, key, object)
add/remove
mapChange/beforeMapChange
mapChange/mapWillChange
Range Changes
object.addRangeChangeListener
(handler, token)
handler.handleTokenRangeChange
(plus, minus, index)
add/remove
rangeChange/beforeRangeChange
rangeChange/rangeWillChange
Array Range Changes
shift() → 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)
© Sidney Harris — http://www.sciencecartoonsplus.com/
Bindings
a ↔ ba.b ↔ c.da ← b.map{c}a ← b.filter{c}a ← b.sorted{c}a ← b.flatten()sum, average,reversed, enumerate,items, some, every
a.has(b) ↔ ca == b ↔ ca[b] ↔ ca.* ← c.map{d}a[*] ← b.toMap()a ← b.toMap{[.0, .1]}r ← (x**2 + y**2) //2f ↔ c * 1.8 + 32a ← b.{x: .0, y: .1}
http://montagejs.github.com/frb/grammar.xhtml
Pipelines
http://montagejs.github.com/frb/grammar.xhtml
Insert Demo Here
a.b ↔ c.d
this.defineBinding("a.b", { "<->": "c.d"});
{ "prototype": "montage", "bindings": { "a.b": {"<->": "c.d"} }}
"selectionName": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
"element": {"#": "selectionName"}
},
"bindings": {
"value": {
"<-": "
@selection.currentIteration.object.name + (
', ' : ''
)
"
}
}
}
// Repetition.Iteration
// didCreate:
this.defineBinding("isLast", {
"<-": "
visibleIndex ==
repetition.iterations.length - 1
"
});
// ContentController.Iteration
// didCreate:
this.defineBinding("selected", {
"<->": "controller.selection.has(object)"
});
Insert More Awesomer Demo Here
"valueInput": {
"prototype": "montage/ui/input-text.reel",
"properties": {
"element": {"#": "valueInput"}
},
"bindings": {
"value": {
"<->": "
@owner.data
"
}
}
}
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 ); });}
exports.makeSumObserver = makeCollectionObserverMaker(
function setup() {
var sum = 0;
return function rangeChange(plus, minus, index) {
sum += plus.sum() - minus.sum();
return sum;
};
}
);
Upcoming Changes
● array.property → array.map
{property}
● array.count() →
array.length
Upcoming Changes
this.defineBinding(target, targetPath, {
"<- or <->": boundObjectPropertyPath,
source: boundObject
});
http://{github,documentup}.com/montagejs/frb
http://{github,documentup}.com/montagejs/frb