Question

您好我想使用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);
    } 
  });
}

所以这里的问题是，当我点击调整大小按钮时，它会从DOM中删除 temp 模板

Answer 1

这取决于你想要实现的目标，但你可以在这里更好地利用模板中的反应性，而不是使用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变量可以在任何地方（在客户端上）使用，因此您可能最好将它们设置在文件顶部的某处，而不是等待创建模板，以防您尝试引用{{1在其他一些代码中，它还没有在第一次运行代码时设置（因为模板仍然被渲染）。只是一个想法。

Meteor在父级重新渲染时破坏模板

1 个答案: