# Data Maps for inherited controller

**URL:** <https://discuss.hotwired.dev/t/data-maps-for-inherited-controller/434>\
**Category:** General\
**Created:** [September 14, 2018, 7:17pm UTC](https://discuss.hotwired.dev/t/data-maps-for-inherited-controller/434 "2018-09-14T19:17:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![cerdiogenes](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/cerdiogenes/32/324_2.png) [@cerdiogenes](https://discuss.hotwired.dev/u/cerdiogenes)\
**Post date:** [September 14, 2018, 7:17pm UTC](https://discuss.hotwired.dev/t/data-maps-for-inherited-controller/434/1 "2018-09-14T19:17:34Z")

</div>

I would like to know what do you think about the possibility to write code like the following:

```auto
import { Controller } from "stimulus"

export default class ParentController extends Controller {
  whoAmI() {
    console.log("${this.data.get('name')}, I'm your father!")
  }
}

export default class ChildController extends ParentController {
  connect() {
    this.whoAmI()
  }
}

<div data-controller="child" data-parent-name="Lucky"></div>

```

Is it something interesting to support in the framework? Do you have any suggestion to bind data to the parent controller?

Thanks!

---

<div class="post-metadata">

**Author:** ![adrienpoly](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/adrienpoly/32/78_2.png) [@adrienpoly](https://discuss.hotwired.dev/u/adrienpoly)\
**Post date:** [September 14, 2018, 8:56pm UTC](https://discuss.hotwired.dev/t/data-maps-for-inherited-controller/434/2 "2018-09-14T20:56:56Z")

</div>

Unless I miss something, this does already work. It is mostly ES6 class inheritance.

However, there is a typo in your example

it should be

```auto
<div data-controller="child" data-child-name="Lucky"></div>

```

and not

```auto
<div data-controller="child" data-parent-name="Lucky"></div>

```

---

<div class="post-metadata">

**Author:** ![cerdiogenes](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/cerdiogenes/32/324_2.png) [@cerdiogenes](https://discuss.hotwired.dev/u/cerdiogenes)\
**Post date:** [September 19, 2018, 7:18pm UTC](https://discuss.hotwired.dev/t/data-maps-for-inherited-controller/434/3 "2018-09-19T19:18:21Z")

</div>

You get it wrong @adrienpoly, I really want to bind data to the parent controller (be able to see the child as an instance of the parent and bind directly to it).

Why? Think about the template method design pattern, being able to bind to the parent controller let’s you specify data, while the child will implement missing parts of behavior.

I accomplished this, without inheritance, in a search controller. The base search fetches data from the server, caches it and also process queries, and implements some callbacks that must be implemented by a view dependent controller.

I ended with this:

```auto
<div data-controller="search-renderer search" data-search-renderer="search-renderer"></div>

```

Then in my search controller I can get the search renderer with the `getControllerForElementAndIdentifier` method and call the methods that notify users about the various stages: loading, success, failed and renderResults.

I could use inheritance and change the data-controller for each specific renderer, and maybe the complexity to support the above scenario is not worth it.