2013-03-12 62 views
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")}); 
    } 
}; 

我想每一个新的图像添加到具有存储在会话变量,而无需重新渲染高度0。我能想到的所有解决方案都像黑客。

+0

我已经编辑我的职务,我不知道你用按钮做什么,但停止图像刷新,您可以使用分离只有改变是个小块 – Akshat 2013-03-12 11:42:05

回答

3

会话将其值存储在Session.keys中,但它们是序列化的。反序列化它们,可以使用parse功能从https://github.com/meteor/meteor/blob/master/packages/session/session.js

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日: 流星刚刚发布v0.5.8,并且与它的新功能。这里是新的方式来做到这一点:

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

UPDATE 15/2/2016 仪表当前已过时,但它仍然有效。使用Tracker代替:

Session.getNonReactive = function (key) { 
    return Tracker.nonreactive(function() { return Session.get(key); }); 
}; 
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

+0

听起来不错。但是,只要在'style'内添加{{#isolate}},它就不会按预期呈现。你试过了吗? – Xyand 2013-03-12 12:16:25

+0

我再次尝试没有隔离,我无法获取图像刷新/重绘:与我用来测试@ https://gist.github的项目一起使用。com /匿名/ 5142555 – Akshat 2013-03-12 12:39:25

+0

因此,我已经移动了隔离高技术,所以这应该工作,因为你想 – Akshat 2013-03-12 12:41:12

相关问题