Question

我使用HTML5up中的免费模板，该模板包含main.js和util.js个文件。这些包含控制视线外观的代码。我已按照建议将这些文件移动到client/lib文件夹。

模板使用jquery，poptrox插件到jquery和skel进行布局。它调整图像大小并裁剪它们以适合方形div框。

问题是如果我在HTML中手动插入图像一切正常。

<div id="main">
    <article class="thumb">
        <a href="images/0.JPG" class="image">
            <img src="images/0.JPG" alt="" />
        </a>
    </article>              
</div>

但如果我使用模板并让meteor加载图像数据：

<template name="ImageT">
   {{#each imageUrl}}
      <article class="thumb">
         <a href="images/{{image}}" class="image">
         <img src="images/{{image}}" alt="" /></a>
      </article>
    {{/each}} 
</template>

图像加载但不会发生缩放和调整大小。从我所看到的情况来看，poptrox扩展程序无法加载。

这是我认为对此负责的模板中的jquery代码：

// Main.
var $main = $('#main');

// Thumbs.
$main.children('.thumb').each(function() {

    var $this = $(this),
    $image = $this.find('.image'), $image_img = $image.children('img'),
                        x;

    // No image? Bail.
    if ($image.length == 0)
        return;

    // Image.
    // This sets the background of the "image" <span> to the image pointed to by its child
    // <img> (which is then hidden). Gives us way more flexibility.

    // Set background.
    $image.css('background-image', 'url(' + $image_img.attr('src') + ')');

    // Set background position.
    if (x = $image_img.data('position'))
        $image.css('background-position', x);

    // Hide original img.
    $image_img.hide();

});

修改

根据答案＃1的建议，我将相关代码移至Template.ImageT.onRendered()

i=0
Template.ImageT.onRendered(
  function(){

     $main = $('#main');
     $main.children('.thumb').each(function(){

       var  $this = $(this),
         $image = $this.find('.image'), $image_img = $image.children('img'),
         x;

       // No image? Bail.
         if ($image.length == 0)
           return;

       // Image.
       // Set background.
           $image.css('background-image', 'url(' + $image_img.attr('src') + ')');

         // Set background position.
           if (x = $image_img.data('position'))
             $image.css('background-position', x);

         // Hide original img.
           $image_img.hide();

       console.log("This function ran: "+i)
       i=i+1;
     });



    console.log("This ran");
  });

这只运行一次（对应于初始元素）而不是流星渲染模板。

如果我在HTML中运行2个元素：

 Ran on 0 index.js:38 
 Ran on 1 index.js:44

但是没有一个流星模板插入元素渲染。

编辑2

当我转到另一个页面并“返回”主页时，代码按预期工作。

Answer 1

您现在只有一个模板，这个模板渲染一次（在页面加载时）。

您希望在Meteor为每个图像呈现HTML后运行jQuery函数的初始化。为此，您可以在imageT模板{{each}}中调用子模板。

<template name="ImageT">
   {{#each imageUrl}}
      {{> image}}
    {{/each}} 
</template>

<template name="image">
    <article class="thumb">
      <a href="images/{{image}}" class="image">
      <img src="images/{{image}}" alt="" /></a>
    </article>
</template>

然后是JS

Template.Image.onRendered = function() {
    //Put code to run every time an image is rendered below
});

另请参阅Meteor文档Template.myTemplate.onRendered

将jquery修改应用于流星站点

修改

编辑2

1 个答案: