2013-03-12 66 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

相關問題