流星破坏父渲染的模板

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中删除临时模板

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变量即可实现反应性的方法，这通常比较整洁-请参见此处。 如果单击“渲染”时的行为需要更复杂，或者在某些情况下您想要再次隐藏temp模板，则只需将逻辑放在相关的事件处理程序中即可。

更新：最后一点，尚不清楚为什么要使用Template.test.created 。 Session变量可在任何地方（在客户端上）使用，因此最好将它们设置在文件顶部的某个位置，而不是等待模板被创建，以防您尝试在其他代码段中引用name并且尚未第一次运行代码段（因为模板仍在呈现）中尚未设置。 只是一个想法。

流星破坏父渲染的模板

问题描述

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