Ember.js、set() 和计算属性

qar*_*dso 3 javascript ember.js computed-properties

我正在阅读该方法的Ember.js API 参考,但set()我没有理解某一特定段落。

计算属性

如果您尝试在定义了计算属性处理程序的键上设置值(示例参见 get() 方法),则 set() 将调用该方法,同时传递值和键,而不是简单地更改值本身。当您需要实现由一个或多个成员属性组成的属性时,这非常有用。

我了解如何set()独立工作,但即使在阅读本段之后,设置计算属性(函数)仍然没有点击。

任何人都可以提供额外的解释或示例吗?

Emb*_*eak 5

您可以阅读https://guides.emberjs.com/v2.14.0/object-model/computed-properties/#toc_setting-computed-properties以获得更好的理解。

在这里,我只是想解释同样的事情。

import Ember from 'ember';
export default Ember.Component.extend({
    firstName: '',
    lastName: '',
    fullNameCP: Ember.computed('firstName', 'lastName', function() {
        return `${this.get('firstName')} ${this.get('lastName')}`
    }),
    fullNameCPwithGetSet: Ember.computed('firstName', 'lastName', {
        get(key) {
            return `${this.get('firstName')} ${this.get('lastName')}`;
        },
        set(key, value) {
            let [firstName, lastName] = value.split(/\s+/);
            this.set('firstName', firstName);
            this.set('lastName', lastName);
            return value;
        }
    })
});
Run Code Online (Sandbox Code Playgroud)

在上面,
如果我们说,this.set('fullNameCP','Yehuda Katz')之后它将被视为普通属性,它将不会被视为计算属性。您不应fullNameCP手动设置为新值。如果你想这样做,那么你需要像 Getter 和 Setter 一样定义 Computed 属性 fullNameCPwithGetSet

如果我们说,,this.set('fullNameCPwithGetSet','Yehuda Katz')那么它也会通过传递值来调用set计算属性fullNameCPwithGetSet的方法,即,Yehuda Katz以便我们可以为依赖键设置确切的值。