How to add dynamic classes in dom-repeat 1.0

[nathanjohnson320]

If I have an element in a dom-repeat element and I want to add the current index as a part of a class name how would I accomplish that?

For example:

<template is="dom-repeat" items="{{ featuredProducts }}" as="product" indexAs="index">
        <div class="featured-plan {{ productClass(index) }}" fix-banner-size="">

The productClass function returns "plan-" + the index but this code won't work due to the changes in interpolation.

[kevinpschaaf]

String interpolation and compound binding is on the near-term roadmap, which will make what you were trying to do possible:
https://www.polymer-project.org/1.0/docs/#binding-features

In the meantime, you just need to bind the entire class to a computing function that returns both the static part and dynamic parts of the class.

 <div class$="{{ productClass(index) }}" fix-banner-size="">

productClass: function(index) {
  return 'featured-plan ' + getClassForIndex(index);
}

Also note that binding to class needs to use a dollar sign for attribute binding class$="{{...}}", otherwise you'd be trying to bind to the JS property named class, which does nothing (the class attribute maps to the JS property className, so you can technically also do class-name="{{...}}"). We usually recommend to just do attribute binding for class, sinceclass-nameis a little clumsy, and when binding to inline style, you must use attribute binding (e.g. style$="{{...}}" for compatibility with IE.

This is discussed in the docs here:
https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#native-binding