javascript - 将jquery修改应用于meteor站点

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();

});

编辑

根据 Answer#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");
  });

这只运行一次(对应于初始元素)，并且不在 meteor 渲染模板上运行。

如果我使用 HTML 中的 2 个元素运行此命令:

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

但是 meteor 模板插入的元素都没有渲染。

编辑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