# Data down in components: any ways to implicitly access it?

**URL:** <https://discuss.emberjs.com/t/data-down-in-components-any-ways-to-implicitly-access-it/8795>\
**Category:** Uncategorized\
**Created:** [September 17, 2015, 6:17pm UTC](https://discuss.emberjs.com/t/data-down-in-components-any-ways-to-implicitly-access-it/8795 "2015-09-17T18:17:12Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ivan\_Youroff](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ivan_youroff/32/11168_2.png) [@Ivan\_Youroff](https://discuss.emberjs.com/u/Ivan_Youroff)\
**Post date:** [September 17, 2015, 6:17pm UTC](https://discuss.emberjs.com/t/data-down-in-components-any-ways-to-implicitly-access-it/8795/1 "2015-09-17T18:17:12Z")

</div>

I’m building `form -> field` nested components. What I want to do is to pass model to form and field names to fields. Like this (in Emblem):

```auto
ac-form model=content
  ac-input field='first_name'

```

ac-form component’s template is `= yield model` which supposed to inject model in the scope of block. And it does, but only accessible from whithin nested component when stated explicitly, like:

```auto
ac-form model=content
  ac-input model=model field='first_name'

```

Is that how it supposed to be and no way to access to the properties of parent component?

---

<div class="post-metadata">

**Author:** ![toranb](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/toranb/32/16579_2.png) [@toranb](https://discuss.emberjs.com/u/toranb)\
**Post date:** [September 17, 2015, 6:59pm UTC](https://discuss.emberjs.com/t/data-down-in-components-any-ways-to-implicitly-access-it/8795/2 "2015-09-17T18:59:22Z")

</div>

Right or wrong I just push down the model I need to “access” or “change”. If that requires the entire model I’ll push that down and my child/nested component can access that directly. This might not scale on bigger forms/component trees but for simple forms w/ a few sub components it’s done well for my team.

---

<div class="post-metadata">

**Author:** ![Ivan\_Youroff](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ivan_youroff/32/11168_2.png) [@Ivan\_Youroff](https://discuss.emberjs.com/u/Ivan_Youroff)\
**Post date:** [September 17, 2015, 9:14pm UTC](https://discuss.emberjs.com/t/data-down-in-components-any-ways-to-implicitly-access-it/8795/3 "2015-09-17T21:14:12Z")

</div>

How exactly do you do that? Are you talking about access to something provided by route/controller or by parent component?

My idea was to do that to enforce isolation. So that there could be two forms on one page with different sourcing objects.

---

<div class="post-metadata">

**Author:** ![toranb](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/toranb/32/16579_2.png) [@toranb](https://discuss.emberjs.com/u/toranb)\
**Post date:** [September 17, 2015, 9:40pm UTC](https://discuss.emberjs.com/t/data-down-in-components-any-ways-to-implicitly-access-it/8795/4 "2015-09-17T21:40:40Z")

</div>

Ah, you must be further down the journey than I 😄

Honestly what I suggest violates the isolation/data shouldn’t be mutated ideas (readonly computed might/or might not allow this even if you are doing that yet).

If you truly want the isolation you “could” do a readonly CP in the child/nested template. Then fire an action like so (on the change event) \*\*read more about this pattern from [Ben](http://emberup.co/bindings-with-htmlbars-helpers/) (great blog post btw)

```
{{my-time-input value=(readonly job.startTime) on-time-change=(action (mut job.startTime))}}

```

Instead of the mut like you see above you could instead throw the action up to the parent component to “change” that model property. I’m still unsure if this is required/what the ember core team wants everyone doing. I ask because I’m not entirely sold that we should throw out all 2WDB like you see in the post from Ben/hear others talk about.

I’ve only had pain w/ 2WDB when I’m unsure why something changed suddenly. And in my 3+ years writing ember this only happens when I use an observer (heck it just happened to me again 2 weeks ago). I’m trying to balance “don’t reinvent 2WDB with actions/helpers” because in my view it still has a valid place. If you find the data flow is hard to reason about/or you literally can’t find out why something changed it’s time to re-think. I just haven’t had that happen yet with components/ models getting passed around.

All that to say … I’m in the minority these days (not using ember-data for example) but it’s worth asking “what caused us harm” in the 2WDB paradigm and is it worth “re-inventing 2WDB in a more verbose way for every scenario” ?

---

<div class="post-metadata">

**Author:** ![Ivan\_Youroff](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ivan_youroff/32/11168_2.png) [@Ivan\_Youroff](https://discuss.emberjs.com/u/Ivan_Youroff)\
**Post date:** [September 17, 2015, 10:03pm UTC](https://discuss.emberjs.com/t/data-down-in-components-any-ways-to-implicitly-access-it/8795/5 "2015-09-17T22:03:04Z")

</div>

Interesting post and whole point, though I don’t see how it could help with input components. As in the end they’d translate `set` action anyway. Also I use plain Ember.Object populated with the data excerpt from the actual model. So It wouldn’t harm anything if it gets mutated on the side.

I was talking more about `form <-> model` isolation from others. And I was going to setup structure where each field of a form would know which object’s part it’s connected with.

---

<div class="post-metadata">

**Author:** ![workmanw](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/workmanw/32/14929_2.png) [@workmanw](https://discuss.emberjs.com/u/workmanw)\
**Post date:** [September 21, 2015, 8:30pm UTC](https://discuss.emberjs.com/t/data-down-in-components-any-ways-to-implicitly-access-it/8795/6 "2015-09-21T20:30:28Z")

</div>

> [@toranb](#):
>
> {{my-time-input value=(readonly job.startTime) on-time-change=(action (mut job.startTime))}}

So this is really my hang up with DDAU. What’s the advantage of having a readonly value then an action and mut helper? Isn’t this just the same with less confusion:

```
{{my-time-input value=job.startTime}}

```

I mean, I certainly understand the value of having the `my-time-input` have an action for change, if you wanted to save a model or trigger some additional property change. But if you’re just modifying a value, why not use a two way binding?

---

<div class="post-metadata">

**Author:** ![uberclops](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/uberclops/32/10217_2.png) [@uberclops](https://discuss.emberjs.com/u/uberclops)\
**Post date:** [September 22, 2015, 6:20am UTC](https://discuss.emberjs.com/t/data-down-in-components-any-ways-to-implicitly-access-it/8795/7 "2015-09-22T06:20:03Z")

</div>

Having a function to modify the data gives you more control over when it gets done. Two-way binding could cause a cascade of updates on computed properties and observers every time the data changes (which could be every button press). Remember components now also rerender whenever their properties change.

Having to use a method guides you into not falling for this trap, and allows you to do things like using a timeout to make sure that the updates only happen after the user hasn’t modified anything for 400 ms, etc…

---

<div class="post-metadata">

**Author:** ![Ivan\_Youroff](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ivan_youroff/32/11168_2.png) [@Ivan\_Youroff](https://discuss.emberjs.com/u/Ivan_Youroff)\
**Post date:** [September 22, 2015, 6:09pm UTC](https://discuss.emberjs.com/t/data-down-in-components-any-ways-to-implicitly-access-it/8795/8 "2015-09-22T18:09:13Z")

</div>

I think changes to editable model should be made immediately, other thing is the action that’s happening afterwards. And there Ember run-loop comes to rescue. I use `debounce` method to wrap action, it helps to ensure that action happened only once in the defined time interval. (sort of typeahead, it will not run until you stop typing)

---

<div class="post-metadata">

**Author:** ![toranb](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/toranb/32/16579_2.png) [@toranb](https://discuss.emberjs.com/u/toranb)\
**Post date:** [September 23, 2015, 3:49pm UTC](https://discuss.emberjs.com/t/data-down-in-components-any-ways-to-implicitly-access-it/8795/9 "2015-09-23T15:49:24Z")

</div>

I asked @stefan if he could drop in and comment on this issue to help provide a little guidance to the community 🙂

---

<div class="post-metadata">

**Author:** ![Ivan\_Youroff](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ivan_youroff/32/11168_2.png) [@Ivan\_Youroff](https://discuss.emberjs.com/u/Ivan_Youroff)\
**Post date:** [September 23, 2015, 4:21pm UTC](https://discuss.emberjs.com/t/data-down-in-components-any-ways-to-implicitly-access-it/8795/10 "2015-09-23T16:21:46Z")

</div>

Yeah, thanks. The whole thing of nested components and passing data/events needs to be explained or modified to be more transparent. The way how it worked with nested views was perfectly fine. I mean, that we could access anything from the scope of parent view.

And by the way, with the current thing I had an issue with passing up the actions too, and the only solution I’ve found was triggering an event on parent component by using `this.get('parentView')`, but I thought views are gone. Or they just became internal concept?

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [October 28, 2015, 2:48pm UTC](https://discuss.emberjs.com/t/data-down-in-components-any-ways-to-implicitly-access-it/8795/11 "2015-10-28T14:48:54Z")

</div>

@Ivan_Youroff There is now a much nicer answer to your original question. The contextual components feature is available on canary, and lets you implement something like:

```
{{#my-form model=model as |form|}}
  {{form.input field="firstName"}}
{{/my-form}}

```

very elegantly.

---

<div class="post-metadata">

**Author:** ![Ivan\_Youroff](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ivan_youroff/32/11168_2.png) [@Ivan\_Youroff](https://discuss.emberjs.com/u/Ivan_Youroff)\
**Post date:** [October 28, 2015, 3:09pm UTC](https://discuss.emberjs.com/t/data-down-in-components-any-ways-to-implicitly-access-it/8795/12 "2015-10-28T15:09:29Z")

</div>

Oh, looks very rails-like 😄

Where can I see the details on that new feature? Is `form` just a context of `my-form` component and `input` is another component evaluated within a context?

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [October 28, 2015, 3:15pm UTC](https://discuss.emberjs.com/t/data-down-in-components-any-ways-to-implicitly-access-it/8795/13 "2015-10-28T15:15:35Z")

</div>

The implementation of `my-form` could be as simple as:

```
{{yield (hash input=(component "my-input" model=model)) }}

```

This is looking up another component named “my-input” and pre-setting the `model` attribute. `hash` just creates a POJO with the given properties, which gets yielded and ends up as the value of `form` in my example above. We could also pass a submit component like:

```
{{yield (hash input=(component "my-input" model=model) submit=(component "my-submit" form=this)) }}

```

And then use it like:

```
{{#my-form model=model as |form|}}
  {{form.input field="firstName"}}
  {{#form.submit}}Let's Go!{{/form.submit}}
{{/my-form}}

```

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [October 28, 2015, 3:16pm UTC](https://discuss.emberjs.com/t/data-down-in-components-any-ways-to-implicitly-access-it/8795/14 "2015-10-28T15:16:08Z")

</div>

The feature is behind a flag on canary, I don’t know about API docs yet, but there is a pretty detailed RFC for it.

---

<div class="post-metadata">

**Author:** ![Ivan\_Youroff](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ivan_youroff/32/11168_2.png) [@Ivan\_Youroff](https://discuss.emberjs.com/u/Ivan_Youroff)\
**Post date:** [October 28, 2015, 3:22pm UTC](https://discuss.emberjs.com/t/data-down-in-components-any-ways-to-implicitly-access-it/8795/15 "2015-10-28T15:22:30Z")

</div>

Is there way to programmatically define that hash?

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [October 28, 2015, 3:40pm UTC](https://discuss.emberjs.com/t/data-down-in-components-any-ways-to-implicitly-access-it/8795/16 "2015-10-28T15:40:47Z")

</div>

Yes, in the sense that you can implement your own helper where I used `hash`, and you can pass it whatever component factories you want, and also pass it a reference to `this` (the component doing the yielding).

No, in the sense that there is not yet a public API for doing the component lookup and currying within your component’s JS file. I think we should probably create one, but need to figure out the details.