List widget has many properties, among which there are
listTemplate [optional]
itemTemplate [required]
emptyTemplate [optional]
listTemplate
In listTemplate file (optional; defines HTML template for list’s container; if omitted, list items are added to scene with no container):
<div style="background-color: #1e1e1e;color:#FFFFFF;height:55px;">
MyList
</div>
<div>
#{listElements}
</div>
If ListTemplate is been defined, then you need to mention where those items should be populated. where #{listElements} refers to the list items. if #{listElements} not mentioned, then it wont populate the items.
itemTemplate
defines HTML template for list items
<div class="palm-row">
<div id="storyText" class="listText truncating-text">#{data}</div>
</div>
in ListExample-assistant.js
ListExampleAssistant.prototype.setup = function() {
this.controller.setupWidget("listId",
this.attributes = {
itemTemplate: "ListExample/myRowTemplate",
listTemplate: "ListExample/myListTemplate",
swipeToDelete: true,
},
this.model = {
listTitle: "List Title",
items : [
{data: "Item 1"},
{data: "Item 2"},
{data: "Item 3"},
{data: "Item 4"},
{data: "Item 5"},
]
}
);
};
listTemplate
<div style="background-color: #1e1e1e;color:#FFFFFF;height:55px;">
MyList
</div>
<div>
#{listElements}
</div>
itemTemplate <div class="palm-row" x-mojo-tap-highlight="momentary">
<div style="float:left">#{data}</div>
</div>
|
 |
listTemplate
</div> <div class="palm-group">
<div class="palm-group-title">
My List
</div>
<div class="palm-list">
#{-listElements}
</div>
</div>
Where palm-group / palm-group-title and palm-list are inbuilt classes itemTemplate <div class="palm-row" x-mojo-tap-highlight="momentary">
<div style="float:left">#{data}</div>
</div>
|
 |
| in scene assistant: if listTemplate not mentioned, then the listeitems will be populated directly into the scene.
ListExampleAssistant.prototype.setup = function() {
this.controller.setupWidget("listId",
this.attributes = {
itemTemplate: "ListExample/myRowTemplate",
swipeToDelete: true,
},
this.model = {
listTitle: "List Title",
items : [
{data: "Item 1"},
{data: "Item 2"},
{data: "Item 3"},
{data: "Item 4"},
{data: "Item 5"},
]
}
);
};
itemTemplate
<div class="palm-row" x-mojo-tap-highlight="momentary">
<div style="float:left">#{data}</div>
</div>
|
 |