Thanks, and I apologize: in trying to clarify my question, I oversimplified my illustration and skewed your answer to it. The JSBin I furnished contains only one <can-el> element, but the model I’m attempting to construct needs 16 such elements, each with slightly different attributes (innerHTML and background-color: it’s a color-picker).
I’m hoping to listen for a click event on each <can-el> in order to use the whole set of <can-el>s as a 16-position “switch” to control other parts of the web app. And I want to use stache to change a clicked element’s style and distinguish it visually.
Currently I define the set of 16 <can-el>s as a single string with a JavaScript for() loop, then use that string as my (parent) Component.extend()'s view: definition. This works fine, but because I’m coding it at the parent level, any event: defined in this Component.extend() affects all <can-el>s at once (the problem you helped me avoid in How to limit event outcome to element of origin).
This problem of “overgeneralization” led me to define a separate Component.extend() specifically for <can-el>, but without a view:. This approach almost works: its ViewModel traps clicks on individual <can-el> elements and configures stache content in their specific innerHTMLs, but does not configure their class (or other “outerHTML” content) via stache (as demonstrated in https://jsbin.com/levunun/edit?html,output).
Conceptually, I’m attempting to 1) build a series of similar HTML elements in a loop; and 2) listen and respond to changes and/or events occurring on each one separately. I’m looking for the simplest and most “ideomatic” way of doing so via CanJS.