流星破坏父渲染的模板

Question

Hi I want to render same template with different data inside a meteor template using Meteor.render. 嗨，我想使用Meteor.render在流星模板中渲染具有不同数据的同一模板。 My problem is whenever parent template re-renders it destroys template rendered using Meteor.render. 我的问题是，每当父模板重新渲染时，它就会破坏使用Meteor.render渲染的模板。 I'm new to meteor and not sure is this the right way to do this thing. 我是新来的流星，不确定这是做这件事的正确方法。 Please help. 请帮忙。 I'm sharing my test code: 我正在分享我的测试代码：

test.html 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 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);
    } 
  });
}

So the problem here is when I click on Resize button it removes temp template from the DOM 所以这里的问题是，当我单击“ 调整大小”按钮时，它会从DOM中删除临时模板

Answer 1

It depends what you're looking to achieve, but you can make much better use of reactivity in the templates here, rather than using JS to insert new DOM elements, which will generally just get in the way of what Meteor is doing (as you have found). 这取决于您要实现的目标，但是您可以在此处的模板中更好地利用反应性，而不是使用JS插入新的DOM元素，这通常只会妨碍Meteor的工作（就像您找到）。

Try: 尝试：

...
<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>
...

and 和

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

There are also ways you can achieve reactivity without having to declare Session variables, which can often be neater - see here . 还有一些无需声明Session变量即可实现反应性的方法，这通常比较整洁-请参见此处。 If the behaviour on clicking "Render" needs to be more complex or there are circumstances under which you'd want to hide the temp Template again, just put the logic in the relevant event handlers. 如果单击“渲染”时的行为需要更复杂，或者在某些情况下您想要再次隐藏temp模板，则只需将逻辑放在相关的事件处理程序中即可。

UPDATE: As a final point, it's not clear why you're using Template.test.created . 更新：最后一点，尚不清楚为什么要使用Template.test.created 。 Session variables are available anywhere (on the client), so you're probably best setting these up somewhere at the top of the file rather than waiting for a template to be created, in case you try to reference name in some other piece of code and it hasn't yet been set the first time that piece of code runs (because templates are still being rendered). Session变量可在任何地方（在客户端上）使用，因此最好将它们设置在文件顶部的某个位置，而不是等待模板被创建，以防您尝试在其他代码段中引用name并且尚未第一次运行代码段（因为模板仍在呈现）中尚未设置。 Just a thought. 只是一个想法。

流星破坏父渲染的模板

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-11-28 07:54:46

流星破坏父渲染的模板

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-11-28 07:54:46

解决方案1
1 已采纳 2013-11-28 07:54:46