Use custom binding for list item instead of class property

[othke]

Hi, I would like to know if there is an alternative to bind the list values to class properties ? The binding on the class property may produce side effect issues.

For example, if my value is named label and a css class label exists (e.g. Bootstrap) the list item is styled with the label class.

Can we use a custom binding with data-* props?

<div id="hacker-list">
    <ul class="list"></ul>
</div>

var options = {
  mountNode: 'data-field',
  valueNames: [ 'name', 'city' ],
  item: '<li><h3 data-field="name"></h3><p data-field="city"></p></li>'
};

var values = [
  { name: 'Jonny', city:'Stockholm' }
  , { name: 'Jonas', city:'Berlin' }
];

var hackerList = new List('hacker-list', options, values);

The mountNode option should indicate to List.js to use other method than getElementsByClasName

var getElementsByClassName = function(container, className, single) {
  if (single) {
    return container.getElementsByClassName(className)[0];
  } else {
    return container.getElementsByClassName(className);
  }
};

It seems that List.js use querySelector for testing. Could we imagine to generalize this with a custom option (mountNode) ?

[Flimm]

Indeed, it makes me very nervous to be using class names like this.

I am used to using classnames for in two ways: for styling (for instance <div class="blue-box"></div>, and for marking for interaction with Javascript, in which case, I always prefix the classname with js- (for instance <button class="js-do-something">. This is obeying the style guide that we're using and makes things immediately much clearer.

I would like to at least be able to prefix the class names used with js-list- or something, but I don't see a way to do that. data-field, as suggested by OP, would be clearer than the current solution.