Monaca Onsen UI Discord Chat Github Repo

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!