如何将记录添加到数组答案

【问题标题】：how to add record to array如何将记录添加到数组
【发布时间】：2018-05-24 11:21:14
【问题描述】：

我是 Emberjs 的初学者，所以我需要将列表中的选定项目传递到购物篮。我有路线目录

  <div class="flexbox">
{{left-menu-bar}}
<div class="main">
  {{side-basket items=items}}
  <div class="catalog-container">
    <div class="container-inner">
        {{#list-filter filter=(action 'filterByName') as |resultItems i|}}
        <ul class="responsive-table">
          <li class="table-header" >
            <div class="col col-1">Наименование</div>
            <div class="col col-2 radio-group">Год<i class="fas fa-angle-up angle angle-left radio" note="up" {{action 'sortColumn' value="target.note"}}></i><i class="fas fa-angle-down angle radio" data-value="down"></i></div>
            <div class="col col-3">Количество<i class="fas fa-angle-up angle angle-left radio"></i><i class="fas fa-angle-down angle"></i></div>
            <div class="col col-4">Цена<i class="fas fa-angle-up angle angle-left"></i><i class="fas fa-angle-down angle"></i></div>
            <div class="col col-5">Примечание</div>
          </li>
          {{#each resultItems as |itemUnit|}}
            {{item-list item=itemUnit  gotItem=(action 'getBasketItem')}}
          {{/each}}
        </ul>
          {{/list-filter}}
    </div>
  </div>
</div>

catalog.js 控制器

export default Controller.extend({
items: [],
actions: {
  filterByName(param) {
    if (param !== '') {
      return this.get('store').query('item', {name: param})
    }
  }
  getBasketItem(param){
    if (param !== '') {
      var item = this.get('store').query('item', {name: param});
      //how to add item in items to use in side-basket
    }
}
}
});

组件 item-list.hbs

<li class="table-row hvr-grow" {{action 'handleItem' item.name}}>
  {{yield result}}
  <div class="col col-1" data-label="Наименование">{{item.name}}</div>
  <div class="col col-2" data-label="Год">{{item.year}}</div>
  <div class="col col-3" data-label="Количество">{{item.quantity}}</div>
  <div class="col col-4" data-label="Цена">{{item.cost}}</div>
  <div class="col col-5" data-label="Примечание">{{item.info}}</div>
</li>

项目列表.js

    export default Ember.Component.extend({
    selectedIndex : false,
    actions: {
     handleItem(param) {
     let handledItem = this.get('gotItem');
     handledItem(param);
   }
 }
});

和带有嵌套篮子列表组件的侧篮组件

scheme

test

test with manual writing

如何实现这个转移？

【问题讨论】：

标签： javascript html web ember.js

【解决方案1】：

从长远来看，如果您将数据获取移动到您的路由而不是控制器，并且只在控制器中使用查询参数，您会发现它会更容易。如果您进行此更改，当您设置过滤器时，您可以更新查询参数，这反过来会导致路由器刷新模型。 Ember 文档在此页面上很好地解释了这一点：

https://guides.emberjs.com/release/routing/query-params/

你还需要看看这个部分：

https://guides.emberjs.com/release/routing/query-params/#toc_opting-into-a-full-transition

注意：getBasketItem 中的 this.get('store').query('item', {name: param}) 正在返回一个承诺。如果您更改为使用查询参数在路由中获取数据，您将能够通过组件中的this.get('model') 访问您的数据，并在您的路由模板中引用model - 这两者都将是解析的数据而不是承诺。

这应该会简化您的代码，并且可以更轻松地处理控制器和组件中的实际项目。无需从 getBasketItem 的商店中获取商品，您应该能够将商品作为参数传递并使用 this.get('items').pushObject(selectedItem) 之类的东西将其推送到您的 items 属性中。

【讨论】：