Question

我有一个由多个页面和一个主页组成的webapp。在Meteor中开发此webapp时，我将页面分隔为模板。 webapp应在一段时间内显示不同的页面，这意味着页面A应持续60秒，然后继续使用Page B持续75秒，依此类推。

在meteor中，我构建了一个主页，其中包含页眉和页脚以及一个可更改的模板。所以基本上主页面如下：

<template name='main'>
   {{>header}}
   {{>templateHolder}}
   {{>footer}}
</template>

并且页面被翻译成模板，即templateA等。这些模板将基于会话对象的更新替换templateHolder，这也基于将要的某些时间（以秒为单位）使用setTimeout JS函数执行。

一切正常，但是我注意到每个页面的时间都变得混乱。当我单独测试template时，它们工作正常。我怀疑setTimeout的异步调用在某种程度上相互冲突。

这是定期更改模板的JS代码。

Template.main.templateHolder = function(){
  var appIndex = Session.get('currentAppIndex');
  switch(appIndex){
     case 'A':
        return Template['templateA'];
  } //....and so on... with other templates
}

Template.main.created = function() {
  //Query each pages display time and load it into sessions
  // etc...........

  Session.set('currentAppIndex',0); //Initialize the first page
  setTimeout(nextPage,0);
}

function nextPage() {
  //Bunch of line of codes that retrieve time param from settings and calculate
  //Also some simple alogrithm to get next templates.. etc
  //Update the session index object so that it reactively updates the templateHolder

  setTimeout(nextPage,currPageDisplayTime); //currPageDisplayTime is the pages time of display in milliseconds.
}

我不确定我的方式是否正确，但它设法显示模板并更改它们。唯一的问题是时机不能正常工作。动态更改模板的最佳方法是什么？这是否容易在将来出现任何错误？

Answer 1

我找到了这种错误行为的原因。我该如何排除故障？

每当模板中发生超时时，我都会放置JS alert。
每当会话对象更新时，alert。

模板渲染的流程应该像这样template A (60 secs) --> template B (75secs)--> template A（这是一个循环）。我注意到在显示template B期间，我放入alert的{{1}}了！这意味着尽管一次只显示一个模板，但创建的模板在场景后仍然保持健康。无论指定做什么，它仍然会继续进行。

这让我意识到，如果两个模板同时存在，我就不能使用相同的会话对象，因为它们都会更新相同的东西。事实证明，我标准化了跨模板的会话对象的使用;例如，我使用template A遍历每个模板中的集合，但由于模板意外地使用了同一个对象，因此它们都会同时更新数据。

所以JS Session.set('itemIndex',index)按预期工作。问题是共享会话对象。

TL; DR模板在未显示/更改时不会被破坏。通过手动或使用不同的对象销毁它可以避免这种情况。

P / S：还在研究如何在创建后销毁模板。

流星渲染模板动态

1 个答案: