How to add an onsen-ui modifier to javascript

LittleOldLady

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

gobiyau

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

Millsaps1

In Onsen UI modifiers are applied by adding the modifier characteristic to a component!