# Communication between "sibling" ViewModels

**URL:** <https://forums.bitovi.com/t/communication-between-sibling-viewmodels/927>\
**Category:** CanJS\
**Created:** [July 10, 2018, 1:44pm UTC](https://forums.bitovi.com/t/communication-between-sibling-viewmodels/927 "2018-07-10T13:44:27Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![code-read](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/code-read/32/111_2.png) [@code-read](https://forums.bitovi.com/u/code-read)\
**Post date:** [July 19, 2018, 2:57pm UTC](https://forums.bitovi.com/t/communication-between-sibling-viewmodels/927/6 "2018-07-19T14:57:03Z")

</div>

Thanks, and I apologize: in trying to clarify my question, I oversimplified my illustration and skewed your answer to it. The [JSBin](https://jsbin.com/levunun/edit?html,output) 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](https://forums.bitovi.com/t/how-to-limit-event-outcome-to-element-of-origin/919?u=code-read)).

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](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.

---

_[View the full topic](https://forums.bitovi.com/t/communication-between-sibling-viewmodels/927)._
