Class Reference
Templating Syntax
The photonui.Template widget use lodash to generates template. Please read the lodash documentation for mode informations:
More examples
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| var TEMPLATE = "";
TEMPLATE += "<ul>";
TEMPLATE += "<% for (var i = 0 ; i < list.length ; i++) { %>";
TEMPLATE += "<li><%- list[i] %></li>";
TEMPLATE += "<% } %>";
TEMPLATE += "</ul>";
var tpl = new photonui.Template({
template: TEMPLATE,
data: {
list: ["Item 1", "Item 2", "Item 3"]
}
});
var field = new photonui.TextField({
value: "Item"
});
var btn = new photonui.Button({
text: "Add",
callbacks: {
click: function (widget) {
tpl.data.list.push(field.value);
}
}
})
var box = new photonui.BoxLayout({
children: [
new photonui.BoxLayout({
orientation: "horizontal",
children: [field, btn]
}),
tpl
]
});
photonui.domInsert(box, "demo");;
|
