OnClick 更改 model.firstObject 数据

Question

我有一个模型在左侧的 li 标签中显示数据。
在 model.firstObject 显示的右侧之一
当用户点击当前li标签时，我想更改右侧model.firstObject以显示当前li数据。

处理此类问题的最佳方法是什么？

<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

引入 selectedObject 而不是 model.firstObject 并在单击 lhs 侧 li 时更新它。

要在控制器中设置 selectedObject 属性的初始值，请使用路由的 setupController 钩子。

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

在控制器内部，执行更新 selectedObject 的操作。

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

而在 hbs 中，您需要在单击 li 标签时调用 updateSelectedObject 方法。

<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>

OnClick 更改 model.firstObject 数据

OnClick change the model.firstObject data

ember.js

ember-cli