带有 ember 电源选择的 Ember 阵列选项

Question

我的模型有 2 个属性（baseCurrency 和 otherCurrencies），其值通过 2 个 ember power selects 下拉菜单在表单中选择，其选项取决于 2 个计算属性（baseCurrencyOptions 和otherCurrencyOptions)

控制器

  ...
  otherCurrencyOptions: Ember.computed('model.baseCurrency', function() {
    console.log(`allCurrencies changed to: ${this.get('allCurrencies')}`);
    return Ember.A(this.get('allCurrencies')).removeObject(this.get('model.baseCurrency'));
  }),
  baseCurrencyOptions: Ember.computed('model.otherCurrencies', function() {
    console.log(`allCurrencies changed to: ${this.get('allCurrencies')}`);
    return Ember.A(this.get('allCurrencies')).removeObjects(this.get('model.otherCurrencies'));
  })
  ...

allCurrencies 属性包含所有货币的列表，它不应随时间而改变。

模板

{{#power-select searchEnabled=true options=baseCurrencyOptions selected=model.baseCurrency onchange=(action (mut model.baseCurrency) as |currency|}}
  {{currency}}
{{/power-select}}
{{#power-select-multiple searchEnabled=true options=otherCurrencyOptions selected=model.otherCurrencies onchange=(action (mut model.otherCurrencies)) as |currency|}}
  {{currency}}
{{/power-select-multiple}}

问题是，每次我在两个下拉菜单中的一个或另一个中选择一种货币时，allCurrencies 属性都会更新，以不可逆的方式丢失每种选定的货币。我希望Ember.A() 能够在不修改 `allCurrencies! 的情况下创建一个全新的对象。此外，我收到以下警告：

弃用：您在一次渲染中修改了 concatenatedTriggerClasses 两次。这在 Ember 1.x 中不可靠，将在 Ember 3.0 中删除 [弃用 id: ember-views.render-double-modify]

Answer 1

Ember.A 不会创建全新的Array它只会实现Ember.Enumerables 和数组接口(reference)。

这是我的建议选项，

1)要创建全新的数组，您可以使用toArray 方法。所以改变这个 Ember.A(this.get('allCurrencies')) 到 this.get('allCurrencies').toArray()

2)另一种选择是，使用 forEach 迭代 allCurrencies 并在回调内部使用迭代 baseCurrency 来检查条件并填充 otherCurrency 数组。

var baseCurreny = this.get('model.baseCurrency');
var otherCurrency = [];
this.get('allCurrencies').forEach(function(item, index, self) {
    /*I assume id as your unique property to identify object
    if (!baseCurrency.findBy('id', item.id)) {
        otherCurrency.pushObject(item);
    }*/
    //or if its plain string then
    baseCurrency.forEach(function(baseItem) {
        if (item !== baseItem) {
            otherCurrency.pushObject(item);
        }
    });
});

1. 定义货币对象数组，如[{id:1,name:'Dollar',type:'base'},{id:2,name:'Yen',type:'other'}] 这样您就可以使用计算宏来获取baseCurrencies 和otherCurrencies

baseCurrencies:Ember.computed.filterBy('allCurrencies','type','base') otherCurrencies:Ember.computed.filterBy('allCurrencies','type','other')