enyo.kind({
name: "myDocument",
model: new MyModel(),
components: [{
name: "myTitle",
content: ""
}, {
name: "body",
content: ""
}],
bindings: [{
from: ".model.title",
to: ".title"
}, {
from: ".model.subtitle",
to: ".subtitle"
}, {
from: ".model.body",
to: ".$body.content"
}],
computed: {
compositeTitle: [
"title",
"subtitle", {
cached: true
}
]
},
compositeTitle: function() {
var title = this.get("title") || "",
subtitle = this.get("subtitle") || "";
return [title, subtitle].join(" ").trim();
},
compositeTitleChanged: function() {
this.$.title.set("content", this.get("compositeTitle"));
this.owner.resized();
}
});
This kind binds to updates from it's model, computes a compositeTitle
out of multiple values and updates the content of myTitle
with the resulting compositeTitle
.myTitle
component. Now any time the myDocument
updates it's title content, the height of the title might change. So, upon every update, we tell the owner it's resized so it can reflow and take into account the new title's height.title
, and a new subtitle
, causing the compositeTitle be recalculated twice (once for each updated binding), leading to two reflows on the owner where a single one at the end would have been sufficient.compositTitle
would be composed out of more components, or components originating from multiple datasources, etc.It looks like you're new here. If you want to get involved, click one of these buttons!