Ember.js OnClick更改model.firstObject数据

我有一个模型，它在左侧的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>

{{{#每个模型作为|菜单}

{{menu.name}

{{menu.lowfat}}


{{/每个}}

{{{以model.firstObject作为{菜单}}
{{menu.name}

{{menu.lowfat}}

{{/与}}

引入

选择的对象

而不是

模型。第一个对象

并在单击左侧

li

时更新它

要在控制器中设置

selectedObject

属性的初始值，请使用路由的

setupController

hook

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

在控制器内部，执行更新

所选对象的操作

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>



{{{#每个模型作为|菜单}

{{menu.name}

{{menu.lowfat}}


{{/每个}}

{{{#选择对象作为|菜单}}
{{menu.name}

{{menu.lowfat}}

{{/与}}
引入
选择的对象
而不是
模型。第一个对象
并在单击左侧
li
时更新它

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

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

在控制器内部，执行更新
所选对象的操作

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>



{{{#每个模型作为|菜单}

{{menu.name}

{{menu.lowfat}}


{{/每个}}

{{{#选择对象作为|菜单}}
{{menu.name}

{{menu.lowfat}}

{{/与}}
这是
（eq menu model.firstObject）
适合您吗？您考虑过使用嵌套路由吗？这是嵌套路由的经典用例此
（eq menu model.firstObject）
适合您？您是否考虑过使用嵌套路由？这是嵌套路由的经典用例作为一项改进，我建议使用get/set computed属性，而不是覆盖
setupController
。1.我应该在菜单控制器中的何处添加setupController？2。对于这个问题，我应该有什么论据；创建示例。我将尝试合并lux和locks评论并更新我的答案..直到那时再玩这个游戏。setupController钩子用于路由文件可能是
routes/application.js
。你不需要通过任何考试
this.\u super（…参数）
这意味着它将调用带有控制器和模型作为参数的super方法。.在super方法中，他们将为控制器设置模型属性。.这是默认行为，因此我们可以访问hbs中的
model
属性。
controller.set（'selectedObject'，model.get（'firstObject'）-这会很小心的。。更新了应答中的代码作为一项改进，我建议使用get/set computed属性，而不是重写
setupController
.1。我应该在菜单控制器中的何处添加setupController？2。对于这个问题，我应该有什么论据；创建示例。我将尝试合并lux和locks评论并更新我的答案..直到那时再玩这个游戏。setupController钩子用于路由文件可能是
routes/application.js
。你不需要通过任何考试
this.\u super（…参数）
这意味着它将调用带有控制器和模型作为参数的super方法。.在super方法中，他们将为控制器设置模型属性。.这是默认行为，因此我们可以访问hbs中的
model
属性。
controller.set（'selectedObject'，model.get（'firstObject'）-这会很小心的。。更新了应答代码