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. 我能想到的所有解决方案都感觉像是 hack。

4

2 回答 2

3

Session 将其值存储在 中Session.keys,但它们是序列化的。要反序列化它们,您可以使用https://github.com/meteor/meteor/blob/master/packages/session/session.jsparse中的函数:

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]);
};    

2013 年 3 月 13 日更新:Meteor 刚刚发布了 v0.5.8,并附带了一个新功能。这是执行此操作的新方法:

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

更新 15/2/2016 Meter 目前已被弃用,但它仍然有效。改用Tracker

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

您可以使用保留:​​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 回答