OnClick change the model.firstObject data

Question

1. I have a model that shows data in a li tag on the left side.

2. On the right side one of the model.firstObject display

3. When users click on the current li tag, I would like change the right side model.firstObject to show current li data.

What's the best way to handle something like this?

<div class="food-menu">
    <ul class="menu-list">
      {{#each model as |menu|}}
        <li class="menu selectable {{if (eq menu model.firstObject) 'active'}}">
          <div class="picture-wrapper">
            <img src="{{menu.picture}}" alt="">
          </div>
          <div class="info-box">
            <h2 class="name">{{menu.name}}</h2>
              <p class="light-blue title-company">
                 {{menu.lowfat}}
            </p>
          </div>
        </li>
      {{/each}}
    </ul>
  </div>
  <div class="menu-detail">
    {{#with model.firstObject as |menu|}}
      <div class="menu menu-banner">
        <div class="picture-wrapper">
          <img src="{{menu.picture}}" alt="">
        </div>
        <div class="info-box">
          <h2 class="light name">{{menu.name}}</h2>
          <p class="light-blue title-company">
            {{menu.lowfat}}
          </p>
        </div>
      </div>
    {{/with}}
  </div>

Answer 1

Introduce selectedObject instead of model.firstObject and update it whenever the lhs side li is clicked.

To set initial value for selectedObject property in controller, use route's setupController hook.

setupController(controller,model){
    this._super(...arguments);
    controller.set('selectedObject',model.get('firstObject'));
  }

Inside controller, have a action to update the selectedObject.

import Ember from 'ember';
export default Ember.Controller.extend({
  appName: 'Ember Twiddle',  
  selectedObject: undefined,
  actions:{
    updateSelectedObject(item){
      this.set('selectedObject',item);
    }
  }
});

and in hbs, you need to call updateSelectedObject method upon clicking the li tag.

<div class="food-menu">
    <ul class="menu-list">
      {{#each model as |menu|}}
        <li class="menu selectable {{if (eq menu selectedObject) 'active'}}" {{action 'updateSelectedObject' menu}}>
          <div class="picture-wrapper">
            <img src="{{menu.picture}}" alt="">
          </div>
          <div class="info-box">
            <h2 class="name">{{menu.name}}</h2>
              <p class="light-blue title-company">
                 {{menu.lowfat}}
            </p>
          </div>
        </li>
      {{/each}}
    </ul>
  </div>
  <div class="menu-detail">
    {{#with selectedObject as |menu|}}
      <div class="menu menu-banner">
        <div class="picture-wrapper">
          <img src="{{menu.picture}}" alt="">
        </div>
        <div class="info-box">
          <h2 class="light name">{{menu.name}}</h2>
          <p class="light-blue title-company">
            {{menu.lowfat}}
          </p>
        </div>
      </div>
    {{/with}}
  </div>