流星摧毁父母重新渲染模板

嗨我想要使用Meteor.render渲染流星模板内的不同数据相同的模板。我的问题是每当父模板重新渲染它会破坏使用Meteor.render呈现的模板。我对流星很陌生，不确定这是做这件事的正确方法。请帮忙。我分享我的测试代码：流星摧毁父母重新渲染模板

的test.html

<head> 
    <title>test</title> 
</head> 

<body> 
    {{> test}} 
</body> 

<template name="test"> 
    <div style="margin: 10px;"> 
    <input type="button" id="render" value="Render"> 
    <input type="button" id="resize" value="Resize"> 
    <div id="placement" style="padding: 10px; background-color: #eee; width: {{width}}px; height: {{height}}px"></div> 
    </div> 
</template> 

<template name="temp"> 
    <h1>{{name}}</h1> 
</template>

test.js

if(Meteor.isClient){ 
    Template.test.helpers({ 
    height: function() { 
     return Session.get("size"); 
    }, 
    width: function() { 
     return Session.get("size"); 
    } 
    }); 

    Template.test.created = function() { 
    Session.set("size", 200); 
    Session.set("name", "Dal Chand"); 
    } 

    Template.test.events({ 
    'click #render': function(event, template) { 
     var frag = Meteor.render(function(){ 
     return Template.temp({name: Session.get("name")}); 
     }); 
     var el = document.getElementById('placement'); 
     if(el) el.appendChild(frag); 
    }, 
    'click #resize': function(event, template) { 
     var size = Session.get("size"); 
     Session.set("size", (size + 100) % 500 + 300); 
    } 
    }); 
}

所以这里的问题是，当我在单击调整大小按钮，它删除temp来自DOM的模板

来源

2013-11-28 dc4ual

这取决于你想要达到的目标，但是你可以更好地使用模板中的反应性，而不是使用JS来插入新的DOM元素，这通常只会影响Meteor正在做的事情如你所见）。

尝试：

... 
<template name="test"> 
    <div style="margin: 10px;"> 
    <input type="button" id="render" value="Render"> 
    <input type="button" id="resize" value="Resize"> 
    <div id="placement" style="padding: 10px; background-color: #eee; width: {{width}}px; height: {{height}}px"> 
     {{#if renderTemp}}{{> temp}}{{/if}} 
    </div> 
    </div> 
</template> 
...

和

if(Meteor.isClient){ 

Session.set('renderTemp', false); 

    Template.test.helpers({ 
    height: function() { 
     return Session.get("size"); 
    }, 
    width: function() { 
     return Session.get("size"); 
    } 
    }); 

    Template.test.helpers({ 
    renderTemp: function() { 
     return Session.get('renderTemp'); 
    } 
    }) 

    Template.test.created = function() { 
    Session.set("size", 200); 
    Session.set("name", "Dal Chand"); 
    } 

    Template.temp.helpers({ 
    name: function() { 
     return Session.get("name"); 
    } 
    }) 

    Template.test.events({ 
    'click #render': function(event, template) { 
     Session.set('renderTemp', true); 
    }, 
    'click #resize': function(event, template) { 
     var size = Session.get("size"); 
     Session.set("size", (size + 100) % 500 + 300); 
    } 
    }); 
}

也有可以实现的反应方式，而不必申报Session变量，而这往往是整洁 - 看到here。如果单击“渲染”时的行为需要更复杂，或者您有希望再次隐藏temp模板的情况，只需将逻辑放入相关的事件处理程序中即可。

更新： 作为最后一点，目前尚不清楚为什么你使用Template.test.created。 Session变量可以在任何地方（客户端）使用，因此您可能最好将这些变量设置在文件顶部的某处，而不是等待创建模板，以防您尝试在其他代码段中引用name并且该代码第一次运行时还没有设置（因为模板仍在渲染）。只是一个想法。

来源

2013-11-28 07:54:46 richsilv

流星摧毁父母重新渲染模板

回答

相关问题