# Computer properties between Components

**URL:** <https://discuss.emberjs.com/t/computer-properties-between-components/5777>\
**Category:** Uncategorized\
**Created:** [June 26, 2014, 5:53pm UTC](https://discuss.emberjs.com/t/computer-properties-between-components/5777 "2014-06-26T17:53:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![JoshElias](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@JoshElias](https://discuss.emberjs.com/u/JoshElias)\
**Post date:** [June 26, 2014, 5:53pm UTC](https://discuss.emberjs.com/t/computer-properties-between-components/5777/1 "2014-06-26T17:53:10Z")

</div>

I was thinking of having a child component witha property that has a oneWay relationship to a parent property like this:

> isSelected: Ember.computed.oneWay(‘FilterOptionsComponent.hasSelectAll’)

I can’t get it to seem to work though. Here’s my parent component:

```
<script type="text/x-handlebars" id="components/filter-options">
      <h2>{{input type="checkbox" checked=hasSelectAll}} Filter Options</h2>
</script

```

I imagine its how I’m referencing it in the oneWay call. I’ve also tried:

> isSelected: Ember.computed.oneWay(‘components/filter-options.hasSelectAll’)

and

> isSelected: Ember.computed.oneWay(‘filter-options.hasSelectAll’)

Any ideas?

---

<div class="post-metadata">

**Author:** ![macu](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/macu/32/5402_2.png) [@macu](https://discuss.emberjs.com/u/macu)\
**Post date:** [June 26, 2014, 6:41pm UTC](https://discuss.emberjs.com/t/computer-properties-between-components/5777/2 "2014-06-26T18:41:59Z")

</div>

If the parent is the enclosing component, and the child component is rendered through the parent’s `{{yield}}` helper, then the child should have access to properties in the parent component via `parentView`. There’s an [outstanding proposal](http://discuss.emberjs.com/t/isolation-of-components-always-required/5036) to rename this to `parentComponent` for components.

Allow the parent template to wrap the child components:

```nohighlight
<script type="text/x-handlebars" id="components/filter-options">
      <h2>{{input type="checkbox" checked=hasSelectAll}} Filter Options</h2>
      {{yield}}
</script>

```

Then make use of the templates like this:

```nohighlight
{{#filter-options}}
     {{filter-option ...}}
     {{filter-option ...}}
{{/filter-options}}

```

And then in the child controller:

```auto
parentHasSelectAll: Ember.computed.oneWay('parentView.hasSelectAll')

```

---

<div class="post-metadata">

**Author:** ![JoshElias](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@JoshElias](https://discuss.emberjs.com/u/JoshElias)\
**Post date:** [June 26, 2014, 7:01pm UTC](https://discuss.emberjs.com/t/computer-properties-between-components/5777/3 "2014-06-26T19:01:57Z")

</div>

The child component doesn’t need to be rendered inside a {{yield}} to have access to the parentView. The scoping alone determines this.

Also, will {{yield}} work inside an {{#each}} block? I currently define my template like this:

> {{filter-options filterOptions=filterOptions selected=selectedFilters}}

```
 <script type="text/x-handlebars" id="components/filter-options">
     <h2>{{input type="checkbox" checked=hasSelectAll}} Filter Options</h2>
     {{#each filterOptions}}
        {{filter-option name=name optionID=id PA_toggleSelected="toggleSelected"}}
     {{/each}}
 </script>

<script type="text/x-handlebars" id="components/filter-option">
  <label>{{input type="checkbox" checked=isSelected}}{{name}}</label>
</script>

```

---

<div class="post-metadata">

**Author:** ![macu](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/macu/32/5402_2.png) [@macu](https://discuss.emberjs.com/u/macu)\
**Post date:** [June 26, 2014, 7:25pm UTC](https://discuss.emberjs.com/t/computer-properties-between-components/5777/4 "2014-06-26T19:25:48Z")

</div>

Oh I see. I don’t think you could put `{{yield}}` inside an each block, because yield is an outlet for content between the open and close component tags. It is only yielded once.

However, I’m curious why you’re passing `filterOptions` as an array into the parent, and then using `#each` in the parent template to create the child components. Does `filterOptions` _always_ come from a controller property? If you want to the component to be more flexible, so that you can declare options right in your templates, then you could put _each_ within the _yield_ like this:

```nohighlight
 <script type="text/x-handlebars" id="components/filter-options">
     <h2>{{input type="checkbox" checked=hasSelectAll}} Filter Options</h2>
     {{yield}}
 </script>

<script type="text/x-handlebars" id="components/filter-option">
  <label>{{input type="checkbox" checked=isSelected}}{{name}}</label>
</script>

<script type="text/x-handlebars" id="index">
  {{#filter-options}}
    {{filter-option name="Hardcoded example option 1"}}
    {{filter-option name="Hardcoded example option 2"}}
    {{#each filterOptionsFromController}}
      {{filter-option name=name optionID=id PA_toggleSelected="toggleSelected"}}
    {{/each}}
  {{/filter-options}}
</script>

```

---

<div class="post-metadata">

**Author:** ![JoshElias](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@JoshElias](https://discuss.emberjs.com/u/JoshElias)\
**Post date:** [June 26, 2014, 8:48pm UTC](https://discuss.emberjs.com/t/computer-properties-between-components/5777/5 "2014-06-26T20:48:27Z")

</div>

In my case it does always come from the controller. The filters will depend on the model and will never change. I’ve changed it now to actually to be wired up in the component itself as to keep the template nice and agnostic from my user’s perspective. Thanks for your insight friend.