그래서 저는 EmberJS를 스스로 가르치고 있으며 모든 것이 잘되고 있습니다. 여기 와 여기에 제시된 질문과 답변 덕분에 저는 초기 골칫거리를 지나갔습니다. 내 환경은 다음과 같습니다.
이제 공식 EmberJS 홈페이지 에서 "Components"예제를 다시 살펴 보겠습니다 . 간단한 코드 예제는 다음과 같습니다. 물론 EmberCLI 구조에 맞게 조정되었습니다.
import Ember from 'ember';
export default Ember.Component.extend({
size: 200,
email: '',
gravatarUrl: Ember.computed('email', 'size', function() {
var email = this.get('email').toLowerCase(),
size = this.get('size');
return 'http://www.gravatar.com/avatar/' + md5(email) + '?s=' + size;
})
});
이것의 문제는 각 키를 누를 때마다 Gravatar URL을 가져 오려고 시도한다는 것입니다. 이는 비용이 많이 들고 전면 애플리케이션에 노이즈가 많습니다. 대신 입력이 중지 될 때까지 데이터 가져 오기를 지연하고 싶습니다. 내가 찾은 게시물을 바탕으로 여기 뿐만 아니라로 여기 와 여기에 키를 사용하는 것 같다 debounce과정을 지연 할 수 있습니다. 여태까지는 그런대로 잘됐다. 그래서 링크 된 예제와 공식적인 EmberJS 예제를 살펴보면 이것을 채찍질했습니다. 그러나 나는 그것에 대해 너무 뜨겁지 않습니다.
import Ember from 'ember';
export default Ember.Component.extend({
email: '',
size: 200,
delay: 500,
gravatarUrl: Ember.computed('email', 'size', function () {
Ember.run.debounce(this, this.gravatarUrlSetValue, this.get('delay'));
}),
watchEmail: function () {
Ember.run.debounce(this, this.gravatarUrlSetValue, this.get('delay'));
}.observes('email', 'size'),
gravatarUrlSetValue: function() {
var email = this.get('email').toLowerCase();
var size = this.get('size');
this.set('gravatarUrl', 'http://www.gravatar.com/avatar/' + md5(email) + '?s=' + size);
}
});
무엇보다도 이것은 작동합니다. 그러나 Ember.run.debounce두 함수 내에서 두 번의 호출 이 있다는 것이 이상하게 보입니다 . 어떤 식 으로든 결합되어야하지 않습니까? 또한 이 반환 명령을 대체 하는 제안을lame_coder 사용 하고 있습니다 .
return 'http://www.gravatar.com/avatar/' + md5(email) + '?s=' + size
이것으로 :
this.set('gravatarUrl', 'http://www.gravatar.com/avatar/' + md5(email) + '?s=' + size);
본질적으로 메소드를 값으로 덮어 쓰기 때문에 그것도 지저분 해 보입니다. 이 모든 것이 작동한다는 뜻이지만, 더 잘 처리 할 수있는 클러 지일 뿐입니 까? 예를 들어,이 watchEmail함수는 명시 적으로 호출되지는 않지만 주로 .observes('email', 'size')aspect를 위해서가 아니라면 필요한 것 같습니다 . 이를 정리하고 debounce논리에서 원하는대로 작동하도록하려면 어떻게해야합니까?
좋아요, 제가 직접 답할 수있었습니다. 에서 제공하는 코드 sbatson5의 대답은 지금은 잘 작동하지만 필요가 서로에 대한 무역 하나의 복잡성 문제를 보인다 할 수있는 rejiggering 해당 솔루션 보인다. 이러한 종류의 레코딩이 필요한이 전체 예제와 문제에 대해 특별히 이상한 것은 없습니다.
내 본능은 또한 이것이 내가 생각했던 것보다 더 간단하다고 말했습니다. 그래서 저는 결정했습니다. 함수 this.watchEmail();에서 직접 호출하기 만하면 gravatarUrl()됩니다. 이전에 가지고 있던 코드를 다음과 같이 재구성 할 수 있다는 것을 알고 있습니다.
import Ember from 'ember';
export default Ember.Component.extend({
email: '',
size: 200,
delay: 500,
gravatarUrl: function () {
this.watchEmail();
}.property('email', 'size'),
watchEmail: function () {
Ember.run.debounce(this, this.gravatarUrlSetValue, this.get('delay'));
}.observes('email'),
gravatarUrlSetValue: function() {
const email = this.get('email').toLowerCase();
const size = this.get('size');
// console.log(this.get('email'));
this.set('gravatarUrl', 'http://www.gravatar.com/avatar/' + md5(email) + '?s=' + size);
}
});
여기에는 여전히 세 가지 핵심 기능이 있지만 논리는 좀 더 깔끔합니다. 또한 공식 EmberJS 문서에서 "계산 된 속성"을 읽었gravatarUrl: Ember.computed('email', 'size', function () { 으며 원래 제자리에 있던 것이 "대체 호출"방법으로 간주 된다는 점에 유의합니다 . 그리고 계산 된 값을 처리하는 실제 기본 / 선호 방법은 .property('email', 'size')대신 함수 에 연결 하는 것입니다. 보기와 읽기가 더 깨끗하고 구문 분석이 더 쉽습니다.
그래서 이것은 내 요구를 충족시킵니다. debounce이와 같은 경우에 를 호출하는 더 간단한 방법이있는 사람이 있으면 언제든지 답변을 게시 해주세요.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다