Question

我有一个有几个观察员的模型，在看了Stefan Penner's talk删除观察者之后，我想对mine做同样的事情：

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"),
    // ...
});

我考虑了类似于＆＃34;操作，数据和＃34;，控制器或组件可能处理这样的计算属性：

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属性，而是将description属性设置为computed并在必要时更新它：

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;
}

我通常会尝试避免模型中的异步操作，因为当您等待大量内容加载时，它会变得非常混乱。

EmberJS：重构模型观察者

1 个答案: