灰燼綁定輸入值取決於另一個輸入

Question

我正在使用Ember JS，但遇到一個奇怪的問題，但找不到解決方案。

現在，我有了一個表單，在此表單中，我有一個“成本”輸入，該輸入顯然需要一個項目的成本，在它旁邊是一個選擇標記，用戶可以從中選擇用於輸入成本的時間花費。

如果用戶每天在指定項目上花費10美元，那么他應該從選擇菜單中選擇“每天”，如果10美元用於“每周”，則用戶應該選擇“每周”，依此類推。

現在，在這兩個輸入下面，我有四個“只讀”標簽，我想在其中向用戶顯示“每日”，“每周”，“每月”和“每年”的花費。

但是我收到錯誤消息“斷言兩次您修改****失敗...”

這是我的模板：

{{ui-input value=name placeholder="Expense Name" label="Name"}}

{{ui-input value=cost placeholder="Expense Cost" label="Cost" half=true}}

{{ui-select value=costTime default="Expense Time" label="Expense Time" items=formData.expenseTime half=true}}

<div class="col-md-6 no-padding">
    {{ui-readonly value=expense.daily placeholder="Daily" label="Daily" half=true}}
    {{ui-readonly value=expense.weekly placeholder="Weekly" label="Weekly" half=true}}            
</div>
<div class="col-md-6 no-padding">
    {{ui-readonly value=expense.monthly placeholder="Monthly" label="Monthly" half=true}}            
    {{ui-readonly value=expense.yearly placeholder="Yearly" label="Yearly" half=true}}
</div>

這是我要在控制器中執行的操作

import Ember from 'ember';
export default Ember.Component.extend({
        expense : { daily: '', weekly: '', monthly: '', yearly: '' },
        setExpense : Ember.computed('cost', 'costTime', 'expense.weekly', function() {
            if (this.get('costTime') == 'daily') {
                this.set('expense.weekly', Number(this.get('cost') * 7))
            }
            return this.get('expense.weekly')
        }),
});

Answer 1

我可以看到你正在試圖設置屬性expense.weekly一個計算的屬性里面setExpense這被認為是一個反模式，因為設置一個計算得到的一個內部屬性可能引發UI重新呈現和它已經過時了。 此外，從計算屬性（ setExpense ）內部的邏輯setExpense ，我認為它非常適合執行操作。

您可以將邏輯移至單獨的操作，並在選擇選項更改時觸發它。 這將消除您現在面臨的回溯錯誤。

備選方案：您可以借助帶有適當的從屬屬性的計算屬性來計算expense 。

expense: Ember.computed('cost', 'costTime', function () {
  let expense = { daily: '', weekly: '', monthly: '', yearly: '' };
  // compute the expense here...
  return expense;
})

Answer 2

最好的模式是使用DDAU和組件didReceiveAttrs掛鈎。

import Ember from 'ember';
export default Ember.Component.extend({
    cost: null,
    costTime: null
    expense : { daily: '', weekly: '', monthly: '', yearly: '' },

    didReceiveAttrs: function() {
        var cost = this.get('cost');
        var costTime = this.get('costTime');
        if (cost && costTime) {
          if (costTime == 'daily') {
            this.set('expense.weekly', Number(cost * 7))
          } else ...
        }
    }
});

並且您必須將更改成本和costTime的操作傳遞給父組件並在那里進行更改。 編輯：另一種方法是定義更多屬性：

import Ember from 'ember';

var multipliers = { daily: 1, weekly: 7, monthly: 30, yearly: 365 };
function computeDailyCost(cost, costTime) {
  var multiplier = multipliers[costTime];
  if (multiplier) {
    return cost / multiplier
  }
}

function defMultCost(multiplierKey) {
  return Ember.computed("cost", "costTime", function() {
    var dailyCost = this.computeDailyCost(this.get("cost"), this.get("costTime"));
    var multiplier = multipliers[multiplierKey];
    if (dailyCost != null && multiplier != null) {
      return dailyCost * multiplier;
    }
  });
};

export default Ember.Component.extend({
    cost: null,
    costTime: null
    daily: defMultCost("daily"),
    weekly: defMultCost("weekly"), 
    monthly: defMultCost("monthly"), 
    yearly: defMultCost("yearly")

});

我沒有對此進行測試，但是應該可以。