Passing data sideways in Ember

[CoreyFedde]

Data down and action up, but what about passing data to a sibling component.

I have two components under my Loans template: drop-down and tools-drop-down.

Drop down send a selectedLoan object up to the Loans router, but I am having trouble sending the selectedLoan object down to the tools-drop-down.

I have tried following the trails and console logging, as well as changing how the data is passed.

Currently I am console logging selectedLoan.value in the tools-drop-down js file and trying to call the ember variable in the template. I am not getting any errors, but the console logs aren't appearing.

Loans js

model () {
    return this.get('store').findAll('loan');
  },
  selectedLoan:{
    value: null,
  },
  selectedTool: null,
  actions: {
    createLoan(loan) {
      let newLoan = this.get('store').createRecord('loan', loan)
      newLoan.save()
    },
    deleteLoan(loan) {
      // console.log(loan)
      loan.destroyRecord()
    },
    selectLoan(selectloan) {
      this.set('selectedLoan.value', selectloan.value)
      console.log(selectloan)
      console.log(selectloan.value)
      console.log('selectedLoan', this.get('selectedLoan'))
      // console.log(selectedLoan)
    },
    selectTool(selecttool) {
      this.set('selectedTool', selecttool.value)
      console.log(selecttool)
      console.log(selecttool.value)
      console.log('selectedTool', this.get('selectedTool'))
    }
  }

Loans template

{{loans/drop-down loans=model createLoan="createLoan" selectLoan="selectLoan" selectTool="selectTool"}}
{{loans/tools-drop-down loans=model createLoan="createLoan" selectLoan="selectLoan" selectTool="selectTool"}}

Drop-down js

export default Ember.Component.extend({
  selectedLoan: {
    value: null,
  },
  actions: {
    createLoan(newLoan){
      return this.sendAction('createLoan', newLoan)
      // console.log(this.get('loan'))
    },
    selectLoan(loan) {
      this.set('selectedLoan.value', loan)
      return this.sendAction('selectLoan', this.get('selectedLoan'))
      console.log('did anything')
      console.log('loan param', loan)
      console.log('object', this.get('selectedLoan.value'))
    },
  },
});

drop-down template

<select class="form-control" onchange={{action 'selectLoan' value="target.value"}}>
  <option disabled selected>Choose a loan!</option>
  <option value="new-loan">Create New Loan</option>
  {{#each loans as |loan|}}
  <option value="{{loan.id}}">{{loan.name}}</option>>
  {{/each}}
</select>

{{#unless selectedLoan.value}}
  <h3> Select a loan to examine or create a new one </h3>
  {{/unless}}

{{#if (eq selectedLoan.value "new-loan")}}
  {{loan-list/create-loan-form createLoan="createLoan"}}
{{else}}
<ul>
  {{#each loans as |loan|}}
    {{#if (eq selectedLoan.value loan.id)}}
    <li>{{loan-list/card loan=loan}}</li>
    {{/if}}
  {{/each}}
</ul>
{{/if}}

Tools-drop-down js

  selectedTool: {
    value: null,
  },
  actions: {
    selectTool(tool) {
      this.set('selectedTool.value', tool)
      return this.sendAction('selectTool', this.get('selectedTool'))
      console.log('object', this.get('selectedTool.value'))
      console.log('selectedLoan', selectedLoan)
    },
  },

Tools template

<select class="form-control" onchange={{action 'selectTool' value="target.value"}}>
  <option disabled selected>Choose a tool!</option>
  <option value="loan-review">Loan Review</option>
  {{!-- <option value="principal-v-interest">Principal vs. Interest</option>
  <option value="payment-slider">Payment slider</option>
  <option value="remaining-balance">Remaining balance</option> --}}
</select>

{{#unless selectedTool.value}}
  <h3> Select a tool to use</h3>
  {{/unless}}

{{#if (eq selectedTool.value "loan-review")}}
<ul>
  {{#each loans as |loan|}}
    {{#if (eq selectedLoan.value loan.id)}}
    <li>{{loan-list/card loan=loan}}</li>
    {{/if}}
  {{/each}}
</ul>
<h1> {{selectedLoan.value}}</h1>
{{!-- {{else if (eq selectedTool.value "principal-v-interest")}}
<p>Principal vs Interest</p>
{{else if (eq selectedTool.value "payment-slider")}}
<p>Payment Slider</p>
{{else if (eq selectedTool.value "remaining-balance")}}
<p>Remaining balance</p> --}}
{{/if}}

[payne-chris-r]

I think you'd have to update an object that the parent thing (route or component) has visibility of.

[CoreyFedde]

It looks like ember object should be kept out of the route.

The fix for this was creating a parent component that lives between the Loans route and the two drop-down components.