Ember 번역-객체 모델: 클래스 및 인스턴스

클래스 및 인스턴스

엠버를 배울 때 Ember.Component.extend()와DS.Model.extend() 같은 코드를 볼 수 있다.여기서, 당신은 이 extend() 방법과 엠버 대상 모델의 기타 주요 특성을 배울 것입니다.

클래스 및 인스턴스

정의 클래스

부류를 다시 쓰는 방법

인스턴스 생성

초기화 실례

EmberObject에 직접 정의된 배열과 객체는 인스턴스 간에 공유됩니다

.

링크 객체 속성

정의 클래스

새 Ember 클래스를 정의하려면 Ember.Object의 extend() 메서드를 호출합니다.

const Person = Ember.Object.extend({
    say(thing) {
        alert(thing);
    }
});

이것은 say() 방법을 가진 Person 클래스를 정의할 것이다.
존재하는 클래스 extend() 를 호출해서 하위 클래스를 만들 수도 있습니다.예를 들어, Ember에 내장된 Ember.Component 클래스의 하위 클래스를 만들 수 있습니다.
app/components/todo-item.js

export default Ember.Component.extend({
    classNameBindings: ['isUrgent'],
    isUrgent: true
});

부모 클래스 다시 쓰기 방법

하위 클래스를 정의하면 클래스를 다시 쓸 수 있지만, 특수한 _super() 방법을 사용해서 부모 클래스를 실행할 수도 있습니다.

const Person = Ember.Object.extend({
    say(thing) {
        alert(`${this.get('name')} says: ${thing}`);
    }
});

const Soldier = Person.extend({
    say(thing) {
        // this will call the method in the parent class (Person#say), appending
        // the string ', sir!' to the variable `thing` passed in
        this._super(`${thing}, sir!`);
    }
});

let heduda = Soldier.create({
    name: 'Yehuda Katz'
});

yehuda.say('Yes');  // alerts "Yehuda Katz says: Yes, sir!"

어떤 경우, 다시 쓰기 전이나 그 다음에 파라미터를 전달하려고 할 수도 있습니다. _super()이것은 원래의 방법을 계속 평상시와 같이 집행하게 할 것이다.Ember-data의 서열화기에서 다시 쓰기 normalizeResponse() 갈고리는 매우 흔히 볼 수 있는 응용 장면이다....arguments와 같은 확장 연산자를 사용하여 다음을 보다 빠르게 수행할 수 있습니다.

normalizeResponse(store, primaryModelClass, payload, id, requestType)  {
    // Customize my JSON payload for Ember-Data
    return this._super(...arguments);
}

위의 예는 원시 인자 (사용자 정의 후) 를 부모 클래스에 되돌려 주어 정상적으로 실행할 수 있도록 합니다.

인스턴스 생성하기

클래스를 정의하면, 클래스 create() 방법을 사용해서 새로운 실례를 만들 수 있습니다.클래스에 정의된 방법, 속성, 계산 속성은 모두 실례로 얻을 수 있다.

const Person = Ember.Object.extend({
    say(thing) {
        alert(`${this.get('name')} says: ${thing}`);
    }
});

let person = Person.create();

person.say('Hello'); // alerts " says:Hello"

실례를 만들 때 선택할 수 있는 대상을 create() 방법으로 전달해서 실례의 속성 값을 초기화할 수 있습니다.

const Person = Ember.Object.extend({
    helloWord() {
        alert(`Hi, my name is ${this.get('name')`);
    }
});

let tom = Person.create({
    name: 'Tom Dale'
});

tom.helloWord(); // alerts "Hi, my name is Tom Dale"

성능 때문에 create() 방법을 호출할 때, 실례적인 계산 속성을 다시 정의할 수도 없고, 이미 존재하는 방법을 다시 정의하거나 새로운 방법을 정의할 수도 없습니다.create() 방법을 호출할 때 간단한 속성만 설정해야 합니다.방법을 정의하거나 재정의하거나 속성을 계산할 필요가 있다면, 새로운 하위 클래스를 만들고 실례화하십시오.
관례에 따르면 보존 속성이나 변수는 낙타봉 명명법을 사용하지만 실례는 그렇지 않다.따라서 예를 들어 변수Person는 하나의 종류를 가리키고 person는 하나의 실례(보통Person의 실례를 가리킨다.너는 너의 Ember 응용 프로그램에서 이런 명칭 습관을 유지해야 한다.

인스턴스 초기화

새로운 실례가 생성될 때, 그 init() 방법은 자동으로 실행됩니다.이것은 인스턴스를 초기화할 때 초기 설정을 완료하는 데 이상적인 위치입니다.

const Person = Ember.Object.extend({
    init() {
        alert(`${this.get('name')}, reporting for duty!`);
    }
});

Person.create({
    name: 'Stefan Penner'
});

// alerts "Stefan Penner, reporting for study!"

예를 들어 Ember.Component를 계승하고 init() 방법을 다시 썼다면 this.super(...arguments) 호출을 확인하세요!만약 당신이 없다면, 부류가 중요한 설치 작업을 수행할 기회가 없을 수도 있고, 응용 프로그램에서 이상한 행동을 보게 될 것이다.

모든 Ember에서Object에 직접 정의된 배열과 객체는 인스턴스 간에 공유됩니다.

const Person = Ember.Object.extend({
    shoppingList: ['eggs', 'cheese']
});

Person.create({
    name: 'Stefan Penner',
    addItem() {
        this.get('shoppingList').pushObject('bacon');
    }
});

Person.create({
    name: 'Robert Jackson',
    addItem() {
        this.get('shoppingList').pushObject('sausage');
    }
});

// Stefan and Robert both trigger their addItem.
// They both end up with: ['eggs', 'cheese', 'bacon', 'sausage']

이 행위를 피하기 위해서, 우리는 init() 기간에 이 수조와 대상 속성을 초기화하는 것을 추천합니다.이렇게 하면 모든 실례가 특이하다는 것을 보장할 수 있을 것이다.

const Person = Ember.Object.extend({
    init() {
        this.get('shoppingList', ['eggs', 'cheese']);
    }
});

Person.create({
    name: 'Stefan Penner',
    addItem() {
        this.get('shoppingList').pushObject('bacon');
    }
});

Person.create({
    name: 'Robert Jackson',
    addItem() {
        this.get('shoppingList').pushObject('sausage');
    }
});

// Stefan ['eggs', 'cheese', 'bacon']
// Robert ['eggs', 'cheese', 'sausage']

객체 등록 정보 링크

객체의 속성을 연결할 때 get() 및 set() 커넥터 방법을 사용합니다.

const Person = Ember.Object.extend({
    name: 'Robert Jackson'
});

let person = Person.create();

person.get('name'); // 'Robert Jackson'
person.set('name', 'Tobias Fünke');
person.get('name'); // 'Tobias Fünke'

이 연결기 방법을 사용하는지 확인하기;그렇지 않으면 계산 속성이 다시 계산되지 않고 관찰자가 터치하지 않으며 템플릿도 자동으로 업데이트되지 않습니다.
원문 주소