EmberJS:重构模型观测器

Question

我有一个包含多个观察者的模型，在观看了Stefan Penner关于移除观察者的演讲后，我想对我的模型做同样的事情：

import DS from "ember-data";
import Ember from "ember";
import TimeableMixin from "../mixins/timeable";
export default DS.Model.extend(TimeableMixin, {
    employer: DS.belongsTo("company", {async: true}),
    updateDescription: function() {
        let description = "";
        const hasOccupation = !Ember.isBlank(this.get("occupation")),
            hasEmployer = !Ember.isBlank(this.get("employer.name"));
        if (hasOccupation) {
            description += this.get("occupation");
        }
        else {
            if (this.get("type")) {
                description += `${Ember.String.capitalize(this.get("type"))} Job`;
            }
            else {
                description = "Full-time Job"; // we have to hard-code the default, because of async behaviour
            }
        }
        if (hasEmployer) {
            description += ` at ${this.get("employer.name")}`;
        }
        this.get("income").then((resolvedIncome) => {
            resolvedIncome.set("description", description);
        });
    }.observes("employer.name", "occupation", "type"),
    occupation: DS.attr("string"),
    income: DS.belongsTo("income", {async: true}), /* Annual income ($) */
    incomeChanged: function() {
        if (this.get("isHourly")) {
            let hourlyRate = parseInt(this.get("hourlyRate")), weeklyHours = parseInt(this.get("weeklyHours"));
            if (hourlyRate && weeklyHours) {
                let yearlySalary = (hourlyRate * weeklyHours) * 52.1775; // there are 52.1775 weeks in a year
                this.get("income").then((resolvedIncome) => {
                    resolvedIncome.set("value", yearlySalary);
                });
            }
        }
    }.observes("hourlyRate", "weeklyHours"),
    // ...
});

我考虑过类似于"向下操作，向上数据"的东西，其中控制器或组件可能处理这样一个计算属性：

export default Ember.Component.extend({
    updatedDescription: Ember.computed("employment.employer.name", "employment.occupation", "employment.type", function() {
        let description = "";
        const hasOccupation = !Ember.isBlank(this.get("occupation")),
            hasEmployer = !Ember.isBlank(this.get("employer.name"));
        if (hasOccupation) {
            description += this.get("occupation");
        }
        else {
            if (this.get("type")) {
                description += `${Ember.String.capitalize(this.get("type"))} Job`;
            }
            else {
                description = "Full-time Job"; // we have to hard-code the default, because of async behaviour
            }
        }
        if (hasEmployer) {
            description += ` at ${this.get("employer.name")}`;
        }
        return description;
    }),
    employment: null,
    // ...
});

但这将阻止在我的模型上设置description属性，而这正是我最初打算做的

我如何重构我的模型观测器以使用计算属性，并删除它们？

Answer 1

不设置描述属性，而是将描述属性设置为计算属性，并在必要时更新：

description: Ember.computed("employer.name", "occupation", "type", function() {
    let description = "";
    const hasOccupation = !Ember.isBlank(this.get("occupation")),
        hasEmployer = !Ember.isBlank(this.get("employer.name"));
    if (hasOccupation) {
        description += this.get("occupation");
    } 
    else {
        if (this.get("type")) {
            description += `${Ember.String.capitalize(this.get("type"))} Job`;
        }    
        else {
            description = "Full-time Job";
        }
    }
    if (hasEmployer) {
        description += ` at ${this.get("employer.name")}`;
    }
    return description;
}

我通常会尽量避免在模型中进行异步操作，因为当你等待加载很多东西时，它会变得非常混乱。