Javascript 将jquery修改应用于meteor站点

我使用的是一个免费模板，其中包含

main.js

和

util.js

文件。这些包含控制视觉的外观和感觉的代码。我已按照建议将这些文件移动到

client/lib

文件夹中

模板使用

jquery

，

poptrox

插件来

jquery

和

skel

进行布局。它会调整图像的大小并将其裁剪以适合方形分割框

问题是，如果我在HTML中手动插入图像，一切都很好

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

编辑 根据答案1的建议，我将相关代码移动到

Template.ImageT.onRendered（）

此操作仅运行一次（对应于初始元素），并且不会在meteor渲染的模板上运行

如果我使用HTML中的2个元素运行此操作：

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

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

编辑2

---

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

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

您希望在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>

---

另请参见Meteor文档

您现在只有一个模板，此模板只呈现一次（页面加载时）

您希望在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>

---

还可以看到Meteor文档

我的理解——代码是这样的结构：（function（$）{}）（jquery）我不完全理解这个结构。我应该把它复制到onRendered吗？我刚刚浏览了代码。似乎main.js代码创建了一个名为“main”的全局变量。如果将main.init（）放在；在onRendered中，我认为它应该可以工作。这是假设您使用的是html5up中的“镜头”模板。这就是您在链接中引用的代码。这是我设法取出并组合在一起的代码：我仍然有相同的问题，只有第一个元素对此代码作出反应。我更新了我的答案，我认为罪魁祸首是ImageT onRendered只触发了一次。当使用子模板并将onRendered附加到该子模板时，请确保代码在渲染的每个图像之后运行。我应该把它复制到onRendered吗？我刚刚浏览了代码。似乎main.js代码创建了一个名为“main”的全局变量。如果将main.init（）放在；在onRendered中，我认为它应该可以工作。这是假设您使用的是html5up中的“镜头”模板。这就是您在链接中引用的代码。这是我设法取出并组合在一起的代码：我仍然有相同的问题，只有第一个元素对此代码作出反应。我更新了我的答案，我认为罪魁祸首是ImageT onRendered只触发了一次。使用子模板并将onRendered附加到该子模板时，请确保代码在每个渲染的图像之后运行。注意：如果使用建议的.onRendered（每个图像），.onRendered中的“this”将是当前的项目元素。因此，您应该能够将“.thumb.each”函数中的所有代码直接放入.onRendered函数中。注意：如果按照建议使用.onRendered（每张图像），.onRendered中的“this”将是当前的项目元素。因此，您应该能够将“.thumb.each”函数中的所有代码直接放入.onRendered函数中。

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

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

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