>웹 프론트엔드 >JS 튜토리얼 >템플릿 도우미에서 Meteor 메서드를 호출할 때 렌더링 문제를 방지하는 방법은 무엇입니까?

템플릿 도우미에서 Meteor 메서드를 호출할 때 렌더링 문제를 방지하는 방법은 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-11-03 17:47:03385검색

How to Avoid Rendering Issues When Calling Meteor Methods in Template Helpers?

템플릿 헬퍼에서 Meteor 메소드 활용

Meteor 개발의 일반적인 시나리오는 클라이언트 측 내에서 서버 측 메소드를 호출해야 한다는 것입니다. 템플릿 도우미. 메소드를 헬퍼로 직접 가져오는 것은 간단하지만 이 접근 방식은 예기치 않은 렌더링 문제로 이어질 수 있습니다.

질문에 제공된 예를 고려해 보겠습니다.

<code class="js">// lib/test.js
Meteor.methods({
  viewTest: function (str) {
    return str;
  }
});

// client/myView.js
Template.helloWorld.helpers({
  txt: function () {
    var str = Meteor.call('viewTest', 'Hello World.');
    return str;
  }
});</code>

그러나 템플릿을 렌더링할 때 템플릿이 viewTest 메소드로부터 어떤 값도 수신하지 않는다는 것을 알 수 있습니다. 이는 Meteor가 메서드 실행을 완료하기 전에 템플릿을 렌더링하려고 시도하기 때문에 발생합니다.

향상된 솔루션

이 문제를 극복하기 위해 Meteor는 반응 변수를 사용하는 대체 접근 방식을 제공합니다.

<code class="js">// client/myView.js
Template.helloWorld.helpers({
  txt: function () {
    return Template.instance().myAsyncValue.get();
  }
});

Template.helloWorld.created = function () {
  var self = this;
  self.myAsyncValue = new ReactiveVar("Waiting for response from server...");
  Meteor.call('getAsyncValue', function (err, asyncValue) {
    if (err)
      console.log(err);
    else
      self.myAsyncValue.set(asyncValue);
  });
};</code>

이 접근 방식에서는 템플릿 인스턴스의 생성된 수명 주기 후크 내에 반응 변수 myAsyncValue가 생성됩니다. 그런 다음 Meteor 메소드 getAsyncValue가 호출되고 완료 시 결과가 반응 변수에 설정됩니다.

반응 변수를 사용하면 값에 대한 모든 변경 사항이 해당 도우미에 자동으로 전파되어 템플릿이 메서드가 완료되면 반응적으로 업데이트됩니다.

위 내용은 템플릿 도우미에서 Meteor 메서드를 호출할 때 렌더링 문제를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.