Meteor - 每次重新评估{{#if}}时阻止模板重新渲染

时间:2014-02-07 01:21:38

标签: javascript meteor

这就是我想要做的。如果当前Photo对象(我们通过photoId变量获得)具有URL属性,请将其显示为img。如果没有,请显示一个微调器:

{{#if photoUrl photoId}}
  <img src="{{photoUrl photoId}}"/>
{{else}}
  {{> spinner}}
{{/if}}

辅助方法:

photoUrl: function (photoId) {
  var photo = Photos.findOne(photoId);
  if (photo && photo.croppedUrl)
    return photo.croppedUrl;
}

这适用于旧帖子。但刚发布的帖子,其照片仍在上传,在前几秒内多次重新发布此模板。如果内容是静态的,但旋转器正在旋转,并且每次重新渲染都会重新开始,那就没关系。

我的预感是模板正在重新渲染,因为我的上传库(collectionFS)正在对新的Photo对象进行更改,每次发生这种情况时,Meteor会重新评估photoUrl,因为它将该对象作为依赖(对吧?)。例如,在Meteor.nonreactive中包装帮助器主体可以解决紧急问题(尽管它会创建其他问题)。

我会假设Meteor只会在实际更改为{{#if}}条件后重新渲染模板,但无论结果如何,每次重新调整条件时它似乎都会重新渲染。

有没有办法防止不必要的(即{{#if}}条件的相同值)重新渲染?或者我是否必须找到一种方法来获取照片网址而不直接引用Photo对象?

2 个答案:

答案 0 :(得分:0)

在未来的Meteor版本中,您很可能不必这样做。

在当前版本中,如果{{if}}值未更改,则不应重新渲染。重新渲染可能是由页面上的其他东西引起的,这会导致整个模板重新渲染。也许你正在使用模板中其他地方的集合中的东西?模板有一个检查:只有当HTML不同时才会重新渲染模板。

要修复此问题,您需要在{{#isolate}} .. {{/isolate}}块中包含更改的内容。这将隔离块内的所有内容与其外部的更改。

因此,更改将重新渲染并修补隔离块中的所有内容,而不是重新渲染整个模板。

答案 1 :(得分:0)

我也有类似的麻烦。我认为有几种方法可以解决问题。

  1. 尝试使用find代替findOne,例如 {{#each photoes}}{{#if croppedUrl}}...{{/each}}

  2. 尝试使用这些代码以及直接显示旋转的新项目分隔新项目和旧项目,旧项目显示。

  3. 尝试使用常量,并在呈现的js代码中显示所需的一切

  4. 希望有所帮助