Meteor 템플릿 플리커 제거 방법

Question

여러 조건이있는 Meteor 템플릿이 있는데 초기에로드 할 때 일부 조건부 뷰의 깜박임이 발생합니다.

철분 라우터를 사용하고 있으며 구독, 대기() 및 준비() 옵션을 알고 있지만 문제 중 하나는 기본 조건부 isInstalled이 isInstalled를 설정하는 meteor.call 콜백에 의존한다는 것입니다 변수이므로 대기는 구독에 의존하지 않습니다. 그렇다면이 유스 케이스를 어떻게 설명 할 수 있습니까?

Router.route('/admin', function() { 
    this.layout('adminLayout'); 
    this.render('dashboard'); 
}); 

Answer 1

이 깜박이는 문제를 밝혀 지 Iron Router는 wait() 및 ready() 메소드를 사용하여 문제를 해결할 수있는 해결 방법을 제공 할 수 있지만 실제로 Iron Router가 아닌 Meteor 문제입니다.

필자의 특별한 경우에는 가입을 기다리지 않고 Meteor.call 결과를 기다릴 필요가있었습니다. 이것을 달성하기 위해 Iron Router가 이해할 수있는 준비된 메서드로 객체 핸들을 반환하는 익명의 함수를 만들었고 나중에 루트 논리에서 구현할 수있었습니다.

신디스는 불완전한 해결책 이었지만 올바른 방향으로 나를 인도했습니다. 아래는 내가 그것을 달성하는 방법입니다

Router.onBeforeAction(function (params) { 
    var self = this; 
    if (params.url.match(/admin/)) { 
     this.wait(function(){ 
      Meteor.call('isInstalled', function (err, result) { 
       Session.set('installationCheck', true); 
       Session.set('isInstalled', result); 
      }); 
      return { 
       ready: function() { 
        return Session.get('installationCheck'); 
        self.next(); 
       } 
      } 
     }); 
     if (this.ready()) { 
      if (Session.get('isInstalled')) { 
       this.next(); 
      } else if(Session.get('isInstalled') === false) { 
       console.log('go to install!'); 
       this.render('install'); 
      } 
     } 
    } else { 
     this.next(); 
    } 
}); 

을 그리고 여기에 비동기 조건

을 기준으로 경로를 설정할 수 있습니다보다 일반적인 패턴은

Router.onBeforeAction(function (params) { 
    var self = this; 
    this.wait(function(){ 
     Meteor.call('someMethod', function (err, result) { 
      Session.set('someMethodCalled', true); 
      // do whatever with result... 
      Session.set('someCondition', true); 
     }); 
     return { 
      ready: function() { 
       return Session.get('someMethodCalled'); 
       self.next(); 
      } 
     } 
    }); 
    if (this.ready()) { 
     if (Session.get('someCondition')) { 
      this.next(); 
     } else if(Session.get('someCondition') === false) { // important to be explicit === 
      this.render('someSpecificRoute'); 
     } 
    } 
}); 

Answer 2

어떻게 onBeforeAction 후크에 대한 :

<template name="adminLayout"> 
    {{#if isInstalled}} 
     {{#if currentUser}} 
      {{> adminHeader}} 
      <br /><br /> 
      <div class="row"> 
       <div class="medium-3 columns"> 
       {{> adminNav}} 
       </div> 
       <div class="medium-9 columns"> 
       {{> yield}} 
       </div> 
      </div> 
      <div class="row"> 
       <div class="medium-12 columns"> 
       {{> adminFooter}} 
       </div> 
      </div> 
     {{else}} 
      {{> login}} 
     {{/if}} 
    {{else}} 
     {{> install}} 
    {{/if}} 
</template> 

여기 내 템플릿 도우미 내가 경로를 isInstalled

Meteor.call('isInstalled', function (err, result) { 
    if (err) { 
    console.log(err); 
    } 
    Session.set('isInstalled', result); 
}); 

Template.adminLayout.helpers({ 
    isInstalled: function() { 
    return Session.get('isInstalled'); 
    } 
}); 

에 대한 값을 제공 그리고 마지막으로하고있어 방법을 보여주는입니까? 물론 당신이/로그인에 다른 경로를 가지고/설치해야하지만 사용자가 URL을 탐색 할 수 있어야하기 때문에 그게 더 좋은 방법이 될 것이라고 생각, 뭔가 같은 :

Router.onBeforeAction(function() { 
    if (!Meteor.userId()) { 
     Router.go('/login'); 
     this.next(); 
    } else { 
     if (/*check somehow if installed*/) { 
      this.next(); 
     }else{ 
      Router.go('/install'); 
      this.next(); 
     } 
    } 
});