Question

我是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
    }
}
}
});

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

item-list.js

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

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

scheme

test

test with manual writing

如何实现这种转移？

Answer 1

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

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

您还需要查看此部分：

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

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

然后应该简化代码并使其更容易使用控制器和组件中的实际项目。您无需在getBasketItem中从商店中提取商品，而是应该将商品作为参数传递，并将其推送到您的商品属性，例如this.get('items').pushObject(selectedItem)。

如何将记录添加到数组中

1 个答案: