流星破壞父渲染的模板

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