2

テンプレートが変更されたときにテンプレートを再レンダリングせずにSession変数から読み取る方法はありますか？

シナリオ：

jQueryを使用して要素のスタイルを動的に変更しますが、新しい要素が作成されたときにデフォルトのスタイルを設定したいと思います（要素がレンダリングされるときに同じjQueryコマンドを呼び出すことができることはわかっています）

例：

<template name="image">
    <!-- How can I avoid -height- being reactive -->
    <img src="img.jpg" style="height: {{height}}">
</template>

Templates.image.height = function() {
    return Session.get("height");
};

Templates.controls.events = {
    'click #btn': function() {
        // Change the height of all exiting images
        $("img").css({height: Session.get("height")});
    }
};

追加されたすべての新しい画像に、を再レンダリングせずにセッション変数に高さを格納してもらいたいimgです。私が考えることができるすべての解決策は、ハックのように感じます。

4

2 に答える 2

3

セッションはその値を に保存しますがSession.keys、シリアル化されています。それらを逆シリアル化するには、 https : //github.com/meteor/meteor/blob/master/packages/session/session.js のparse関数を使用できます。

var parse = function (serialized) {
  if (serialized === undefined || serialized === 'undefined')
    return undefined;
  return EJSON.parse(serialized);
};

次に、 の代わりにSession.get('key-name')、 を実行します parse(Session.keys['key-name'])。Session.getこれは、コンテキストを無効にすることなく同じことを行う必要があります。これらすべてをまとめると、うまくいくように見えるアプローチは次のとおりです。

Session._parse = function (serialized) {
  if (serialized === undefined || serialized === 'undefined')
    return undefined;
  return EJSON.parse(serialized);
};

Session.getNonReactive = function (key) {
  var self = this;
  return self._parse(self.keys[key]);
};

UPDATE 3/13/2013 : Meteor は v0.5.8 をリリースしたばかりで、新しい機能が追加されました。これを行う新しい方法は次のとおりです。

Session.getNonReactive = function (key) {
  return Deps.nonreactive(function () { return Session.get(key); });
};

UPDATE 15/2/2016 Meter は現在非推奨ですが、引き続き機能します。Tracker代わりに使用してください:

Session.getNonReactive = function (key) {
  return Tracker.nonreactive(function () { return Session.get(key); });
};
于 2013-03-13T07:00:06.220 に答える
2

preserve を使用できます: http://docs.meteor.com/#template_preserve

値を処理するためにjqueryまたはハンドルバーのみを使用しないのはなぜですか?なぜ両方を使用するのですか? 一貫性があるため、コードをより適切に管理できます。

いくつかのコードを投稿した場合、例を手伝うことができます

あなたのコードでその例を編集してください

ハンドルバーのみを使用するコード:

<template name="image">
    <!-- How can I avoid -height- being reactive -->
    {{#isolate}
    <img src="img.jpg" style="height:{{height}}">
    {{/isolate}}
</template>

Template.image.height = function() {
    return Session.get("height") || "0px"; //Default height is no session defined
};

Template.controls.events = {
    'click #btn': function() {
        //What does this do exactly?
        //$("img").css({height: Session.get("height")});

        Session.set("height","40px");
    }
};

テンプレート全体が再レンダリングされるのを防ぐには、リアクティブ変数{{height}}を{{#isolate}}. 反応性分離を参照してください: http://docs.meteor.com/#isolate

于 2013-03-12T10:13:13.973 に答える