Question

我想将数据库集合中的网址加载到<img src="*url*" >标记中。

现在我只是发布/订阅我的集合，然后从集合中检索url并将其放入模板中，如下所示：

...
Template.navigation.helpers({
logoUrl: function(){
   return Img.findOne().url;
}
})
...
<template name="navigation">
<img src="{{logoUrl}}"  alt="logo" >
...

问题是，在加载其他所有内容后加载url。这导致了在页面加载时图像未显示的问题。对于徽标，这非常难看。所以我希望它在那里，好像url是在img标签中硬编码的。

我如何使用Meteor做到这一点？

e.g。在PHP文件中，我只想说：

<?php $url = 'www.blabla.com/myurlwhatever' ?>

<img src="<?=$url ?>" >

当然这不会被动反应，如果没有重新加载整个页面，网址就不会改变，但它至少会在加载标记后立即显示图像。

Answer 1

在模板呈现之前，您确定您对该集合的订阅已准备就绪吗？

您可能希望等待订阅准备就绪并将HTML包装在以下帮助程序中。

{{#if Template.subscriptionsReady }}
    ... html code goes in between the tags ...
{{/else}}
    ... show something else, for example a spinner
{{/if}}

订阅模板。

Template.yourtemplatename.onCreated( function() {
  this.autorun(() => {
    this.subscribe('yourcollection');
  });
});

我希望它有所帮助！

Answer 2

正如您所知，您的模板在订阅“准备就绪”之前呈现，即在他们从服务器接收数据之前呈现。

Blaze的常用解决方法是有条件地显示您的模板（或其内容），检查您的数据是否准备就绪。

例如，您可以这样做：

{{#if logoUrl}}
  <img src="{{logoUrl}}"  alt="logo" >
{{/if}}

只要您的订阅尚未就绪，logoUrl为undefined，且#if阻止条件不符合。

订阅准备就绪后，logoUrl帮助程序会重新运行（如果它在Img集合中找到数据）。如果您现在拥有一些数据，则现在已满足#if阻止条件，并且会显示您的<img>标记，并填写其src属性。

Answer 3

我在这里有一个概念误解。 PHP在服务器上呈现。因此，只要加载页面内容，图像就会直接存在，因为整个页面都是预呈现的。在上面的例子中，一切都是在客户端上呈现的，这是常规方式。

为了达到预期的效果，我们必须看一下Meteor的服务器端渲染（SSR）。这是一个很大的话题，我不确定Blaze是否可以使用SSR。

在加载过程中避免丑陋工件的简单解决方法是隐藏加载屏幕后面的所有内容，或者至少隐藏工件。

如何在集合之前将其从集合加载到模板中，就好像它是硬编码的一样？

3 个答案: