How to add an onsen-ui modifier to javascript
-
I have the following line of code snip:
var item = document.createElement('ons-list-item');
I would like to add a modifier to the code so that each dynamically listed item would have a ‘chevron’. I’ve tried a variety of techniques, but I can’t get it to work. I’ve also searched stack overflow, this community, looked at the references and tutorial, but I can’t find, or maybe, understand an answer. Could some kind person show me how this is done?
TIA
-
Sorry for late reply, but may be useful for other guys.
I think we should use ons.createElement instead, because it will compile after create.
I write an example here.
HTML File
<ons-page> <ons-list id="example"> </ons-list> </ons-page>
Javascript File
var items = [ {"name": "A", "modifier": "chevron", "type":"tappable"}, {"name": "B", "modifier": "","type":""} ]; var createList = function (item) { var modifier = (item.modifier == "") ? "" : 'modifier="'+ item.modifier +'"'; console.log(modifier) return ons.createElement(` <ons-list-item ${modifier} ${item.type}> <div class="center">${item.name}</div> </ons-list-item> ` ); }; for (item of items) { var temp = createList(item); document.getElementById('example').appendChild(temp); };
Then it will appear first list A with chevron and can tap, and list B cannot.
Best Regards
Gobi
-
In Onsen UI modifiers are applied by adding the modifier characteristic to a component!