The document discusses MontageJS bindings and how they can be used to define relationships between object properties. It provides examples of different types of bindings including property bindings, map bindings, and array range bindings. It also previews upcoming changes to how bindings will be defined and array operations will work.

1. Bindings
The Zen of Montage
sch, @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)

6. Discrete Change Listeners
● property changes
● range changes
● map changes

7. Property Changes
object.addOwnPropertyChangeListener
(key, handler, token)
handler.handleTokenChange
(value, key, object)
add/remove
propertyChange/beforePropertyChange
tokenChange/tokenWillChange

8. Map Changes
object.addMapChangeListener
(handler, token) (any key)
handler.handleTokenMapChange
(value, key, object)
add/remove
mapChange/beforeMapChange
mapChange/mapWillChange

9. Range Changes
object.addRangeChangeListener
(handler, token)
handler.handleTokenRangeChange
(plus, minus, index)
add/remove
rangeChange/beforeRangeChange
rangeChange/rangeWillChange

11. 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)

12. © Sidney Harris — http://www.sciencecartoonsplus.com/

13. Bindings
a↔b a.has(b) ↔ c
a.b ↔ c.d a == b ↔ c
a ← b.map{c} a[b] ↔ c
a ← 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) //2
reversed, enumerate, f ↔ c * 1.8 + 32
items, some, every a ← b.{x: .0, y: .1}

14. Pipelines
http://montagejs.github.com/frb/grammar.xhtml

15. http://montagejs.github.com/frb/grammar.xhtml

16. Insert Demo Here

17. a.b ↔ c.d
this.defineBinding("a.b", {
"<->": "c.d"
});
{
"prototype": "montage",
"bindings": {
"a.b": {"<->": "c.d"}
}
}

18. "selectionName": {
"prototype": "montage/ui/dynamic-text.reel",
"properties": {
"element": {"#": "selectionName"}
},
"bindings": {
"value": {
"<-": "
@selection.currentIteration.object.name + (
!@selection.currentIteration.isLast ?
', ' : ''
)
"
}
}
}

19. // Repetition.Iteration
// didCreate:
this.defineBinding("isLast", {
"<-": "
visibleIndex ==
repetition.iterations.length - 1
"
});

20. // ContentController.Iteration
// didCreate:
this.defineBinding("selected", {
"<->": "controller.selection.has(object)"
});

21. Insert More Awesomer Demo Here

22. "valueInput": {
"prototype": "montage/ui/input-text.reel",
"properties": {
"element": {"#": "valueInput"}
},
"bindings": {
"value": {
"<->": "
@owner.data
[+@rowInput.value]
[+@columnInput.value]
"
}
}
}

24. 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
);
});
}

25. exports.makeSumObserver = makeCollectionObserverMaker(
function setup() {
var sum = 0;
return function rangeChange(plus, minus, index) {
sum += plus.sum() - minus.sum();
return sum;
};
}
);

26. Upcoming Changes
● array.property → array.map
{property}
● array.count() →
array.length

27. Upcoming Changes
this.defineBinding(target, targetPath, {
"<- or <->": boundObjectPropertyPath,
source: boundObject
});

28. http://{github,documentup}.com/montagejs/frb

29. http://{github,documentup}.com/montagejs/frb