Ember.js Octane中如何使用find-by实现多属性匹配查找价格数据

实现双属性匹配价格查找的三种可行方案 #

方案1：自定义专属Helper（最推荐，复用性强）

这是最符合Ember开发规范的方式，一次定义多处可用：

1. 新建app/helpers/find-matching-price.js文件，写入如下逻辑：

import { helper } from '@ember/component/helper';

export default helper(function findMatchingPrice([prices, itemId, treatmentId]) {
  return prices?.find(price => 
    price.item.id === itemId && price.treatment.id === treatmentId
  );
});

2. 在模板中直接调用即可：

{{#let (find-matching-price @model.prices item.id treatment.id) as |price|}}
  {{#if price}}
    {{price.amount}}
  {{else}}
    <em>Setup Price</em>
  {{/if}}
{{/let}}

方案2：现有Helper组合实现（无需新增文件）

如果你的项目已经安装了ember-composable-helpers工具库，可以直接嵌套调用现有helper实现过滤：

{{#let (first (filter-by "treatment.id" treatment.id (filter-by "item.id" item.id @model.prices))) as |price|}}
  {{! 后续展示逻辑和方案1一致 }}
{{/let}}

方案3：预生成映射表（性能最优，适合大数据量场景）

如果你的价格数据量较大，频繁遍历会影响渲染性能，可以在组件/Controller层提前把价格转换成键值对映射表，模板直接取值即可：

1. 在对应的Controller/Component类中添加计算属性：

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { get } from '@ember/object';

export default class YourController extends Controller {
  @tracked model;

  get priceLookupMap() {
    const map = new Map();
    this.model.prices.forEach(price => {
      const key = `${get(price, 'item.id')}-${get(price, 'treatment.id')}`;
      map.set(key, price);
    });
    return map;
  }
}

2. 模板中直接取值，无需遍历：

{{#let this.priceLookupMap.get(`${item.id}-${treatment.id}`) as |price|}}
  {{! 后续展示逻辑和方案1一致 }}
{{/let}}

内容的提问来源于stack exchange，提问作者Rizky Tahara Shita