将 jquery 修改应用于流星站点

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");
  });

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

如果我在 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 docs Template.myTemplate.onRender