5

Meteorを使用していますが、コンテンツが望まないときに再レンダリングされるという問題があります。

私のメインコンテンツは、currentUserかなり標準的だと思うifステートメントでラップされています。

{{#if currentUser}}
  {{> content}}
{{/if}}

これに伴う問題は、ユーザーオブジェクトを更新したときにコンテンツテンプレートが再レンダリングされることです。これを回避する方法はありますか？コンテンツテンプレート内のどこにもユーザーを参照していません。

ありがとうございました！

これが私の問題を再現するためのサンプルアプリです：

HTML

<head>
  <title>Render Test</title>
</head>

<body>
  {{loginButtons}}

  {{> userUpdate}}

  {{#if currentUser}}
    {{> content}}
  {{/if}}
</body>

<template name="userUpdate">
  <p>
    <input id="updateUser" type="button" value="Update User Value" />
    User last update: <span id="lastUpdated">{{lastUpdated}}</span>
  </p>
</template>

<template name="content">
  <p>Render count: <span id="renderCount"></span></p>
</template>

JavaScript

if (Meteor.isClient) {
  Meteor.startup(function() {
    Session.set("contentRenderedCount", 0);
  });

  Template.content.rendered = function() {
    var renderCount = Session.get("contentRenderedCount") + 1;
    Session.set("contentRenderedCount", renderCount);
    document.getElementById("renderCount").innerText = renderCount;
  };

  Template.userUpdate.events = {
    "click #updateUser": function() {
      Meteor.users.update({_id: Meteor.userId()}, {$set: {lastActive: new Date()}});
    }
  };

  Template.userUpdate.lastUpdated = function() {
    return Meteor.user().lastActive;
  };

}

if (Meteor.isServer) {
  Meteor.users.allow({
    'update': function () {
      return true; 
    }
  });
}

更新： この例について少し説明する必要があります。ユーザーを作成した後、[ユーザー値の更新]ボタンをクリックすると、レンダリングカウントが増加します。これは、でラップされているため{{#if currentUser}}です。これが削除された場合、レンダリングカウントが1のままであることがわかります。

accounts-uiまた、プロジェクトにaccounts-passwordパッケージを追加する必要があります。

4

1 に答える 1

8

Meteor は、変更されたリアクティブ変数を含むテンプレートを再レンダリングします。あなたの場合、これ{{currentUser}}はMeteor.user()ユーザーのデータを含むオブジェクトです。ユーザープロファイルを更新すると、オブジェクトが変更され、オブジェクトに関連するすべてのリアクティブを再計算するように meteor に指示します。

反応性を少し変更して、ユーザーがログイン/ログアウトするかどうかの変更にのみ反応し、オブジェクト自体には何も反応しないようにすることができます。

Meteor.autorun(function() {
    Session.set("meteor_loggedin",!!Meteor.user());
});

Handlebars.registerHelper('session',function(input){
    return Session.get(input);
});

あなたのhtml

{{#if session "meteor_loggedin"}}
    {{> content}}
{{/if}}
于 2013-02-09T02:34:01.053 に答える