Setting component property

1

Hi,

Here is my scenario.

I have an external component that slides multiple instances of a component contents within. More like a carousel with only one pic in view.

example:

  {{#componentA}}
    {{componentB}}
    {{componentC}}
  {{/componentA}}

In my componentB, I have a visible property that is set to false by default.

export default Ember.Component.extend({
	visible: false,

my componentC triggers an action that I pass all the way to componentA

I want to set the visible variable in componentB to false/true based on the logic in componentC. this.container.lookup(‘component:componentB’) gets me the specific instance of the component B that I need. this.container.lookup(‘component:componentB’).get(‘visible’) returns me false as well. but this.container.lookup(‘component:componentB’).set(‘visible’, true) does not seem to work.

Appreciate your help.

2

please don’t do that, I mean this.container.lookup thing.

This is communication between two sibling components, in order to let them know each other’s state, you need to get/set the state one level up.

{{component-a}} is the common parent for both {[component-b}} and {{component-c}}, so the first step is to setup a state property in {{component-a}} and expose it to its children:

// ComponentA/component.js

visible: false,

actions: {
  toggleVisibility() {
    this.toggleProperty('visible')
  }
}

{{! ComponentA/template.hbs}}

{{yield visible (action "toggleVisibility")}}

in this way, visible can be accessed by any children components, and only {{component-a}} can change the visible’s value. We expose this state and the corresponding action to its children like this:

{{#component-a as |visible toggleVisibility|}}
  {{component-b visible=visible}}
  {{component-c toggle=toggleVisibility}}
{{/component-a}}

Now, {{component-b}} can use its own visible property as the true/false state, and {{component-c}} will have a this.attrs.toggle() method to change the visible’s value.

3

Indeed. Plus it will not work, as this.container.lookup('component:componentB') creates a new instance of the component.

4

Sorry for late followup. Thanks for your responses. FYI: I am on Ember 1.13.8. (I should have put that earlier)

I think I didn’t provide much details. my trouble is this.

{{#componentA}} {{each items ..}} {{componentB}} {{componentC}} {{/each}} {{/componentA}}

now componentC (or any of the nested components within C) fires an event that I handle in the component A action. now depending upon which componentC triggered the action, I need to update the visible property of the corresponding componentB

in Component A, I have access to the current index of the componentC that is triggering the event. How in my componentA I can do, say, “get componentB[currentIndex] and set visible property to something.”

Thanks again