Javascript 在Meteor中重用相同的块帮助器会导致奇怪的上下文问题

我正在尝试重用一个自定义块帮助器，我编写它是为了为一些模板提供基本的旋转木马功能

simple carousel.html

<template name="SimpleCarousel">
  <div class="simple-carousel {{class}}">
    <div class="slides">
      {{#each slides}}
        {{> UI.contentBlock this}}
      {{/each}}
    </div>
    {{#if showControls}}
      {{> SimpleCarouselControls}}
    {{/if}}
  </div>
</template>

<template name="SimpleCarouselControls">
  // control structure here
</template>

<template name="BreakingStories">
  {{#SimpleCarousel class="breaking-stories" showControls=false autoForward=8000 slides=breakingStories}}
    {{> BreakingStorySlide}}
  {{/SimpleCarousel}}
</template>

<template name="BreakingStorySlide">
  <div class="breaking-story slide">
    <div class=breaking-story-title">{{title}}</div>
  </div>
</template>

<template name="DailySummary">
  {{#with thisDailySummary}}
    {{#SimpleCarousel class="daily-summaries" showControls=true slides=items}}
      {{> DailySummarySlide}}
    {{/SimpleCarousel}}
  {{/with}}
</template>

<template name="DailySummarySlide">
  <div class="daily-summary slide">
    <div class="daily-summary-title">{{title}}</div>
  </div>
</template>

breaking_stories.html

<template name="SimpleCarousel">
  <div class="simple-carousel {{class}}">
    <div class="slides">
      {{#each slides}}
        {{> UI.contentBlock this}}
      {{/each}}
    </div>
    {{#if showControls}}
      {{> SimpleCarouselControls}}
    {{/if}}
  </div>
</template>

<template name="SimpleCarouselControls">
  // control structure here
</template>

<template name="BreakingStories">
  {{#SimpleCarousel class="breaking-stories" showControls=false autoForward=8000 slides=breakingStories}}
    {{> BreakingStorySlide}}
  {{/SimpleCarousel}}
</template>

<template name="BreakingStorySlide">
  <div class="breaking-story slide">
    <div class=breaking-story-title">{{title}}</div>
  </div>
</template>

<template name="DailySummary">
  {{#with thisDailySummary}}
    {{#SimpleCarousel class="daily-summaries" showControls=true slides=items}}
      {{> DailySummarySlide}}
    {{/SimpleCarousel}}
  {{/with}}
</template>

<template name="DailySummarySlide">
  <div class="daily-summary slide">
    <div class="daily-summary-title">{{title}}</div>
  </div>
</template>

每日摘要.html

<template name="SimpleCarousel">
  <div class="simple-carousel {{class}}">
    <div class="slides">
      {{#each slides}}
        {{> UI.contentBlock this}}
      {{/each}}
    </div>
    {{#if showControls}}
      {{> SimpleCarouselControls}}
    {{/if}}
  </div>
</template>

<template name="SimpleCarouselControls">
  // control structure here
</template>

<template name="BreakingStories">
  {{#SimpleCarousel class="breaking-stories" showControls=false autoForward=8000 slides=breakingStories}}
    {{> BreakingStorySlide}}
  {{/SimpleCarousel}}
</template>

<template name="BreakingStorySlide">
  <div class="breaking-story slide">
    <div class=breaking-story-title">{{title}}</div>
  </div>
</template>

<template name="DailySummary">
  {{#with thisDailySummary}}
    {{#SimpleCarousel class="daily-summaries" showControls=true slides=items}}
      {{> DailySummarySlide}}
    {{/SimpleCarousel}}
  {{/with}}
</template>

<template name="DailySummarySlide">
  <div class="daily-summary slide">
    <div class="daily-summary-title">{{title}}</div>
  </div>
</template>

{{{与此每日摘要一起}
{{{#SimpleCarousel class=“每日摘要”showControls=true slides=items}
{{>每日汇总幻灯片}
{{/SimpleCarousel}
{{/与}}
{{title}}

我试图简化代码，因为模板中包含了更多的HTML。无论如何，正如您所看到的，我已经定义了#SimpleCarousel块辅助程序，并在两个地方使用了它：breaking stories部分和daily summaries部分。这两个模板恰好位于同一页面（路由），因此它们在页面上彼此相邻。我需要其中一个自动循环，其中我向助手提供了

autoForward

属性，另一个应该只显示控件

这两个模板都可以很好地渲染并显示正确的数据，但问题在于，与突发新闻模板进行任何自动循环不同，另一个模板进行了（并且进行了两次），就好像它们共享相同的上下文一样

---

我的问题是，我能否在同一路线上多次安全地使用自定义块辅助工具？我愿意接受任何关于如何以更好的/不同的方式做这件事的建议。

感谢@JeremyK为我指明了正确的方向；这恰好是我遗漏的代码，这就是问题所在。当然

以下是我在旧版本中的内容：

simple_carousel.js

var actions = {
  back: function() {
    // move slide back once
  },
  forward: function() {
    // move slide forward once
  }
};

var showSlide = function() {
   // code to show the next slide 
};

Template.SimpleCarousel.onRendered(function() {
  // set up carousel logic here
});

Template.SimpleCarousel.events({
  'click [data-sc-move="forward"]': function() {
      actions.forward();
  },
  'click [data-sc-move="back"]': function() {
      actions.back();
  }
});

Template.BreakingStories.helpers({
  breakingStories: function() {
    return BreakingStories.find();
  }
});

var $slideContainer, $controls, $markers, $activeSlide, $nextSlide;

var actions = {
    back: function() {
        // move slide back
    },

    forward: function() {
        // move slide forward
    }
};

function showSlide() {
    // show the "next" slide
}

Template.SimpleCarousel.onRendered(function() {
    var data = this.data;

    $slideContainer = this.$('.sc-slides');
    // rest of this code is irrelevant
});

我原以为我在第一行声明的变量独立于我正在使用的模板的多个实例化，但我错了。第一次使用

$slideContainer=this.$（'.sc slides'）工作正常，但是
$slideContainer
和所有其他文件都是共享的

为了解决这个问题，我只需将局部变量/操作移动到
Template.SimpleCarousel.onRendered

Template.SimpleCarousel.onRendered(function() {
    var $slideContainer, $markers, ...

    this.actions = {
      //...
    };
});

Template.SimpleCarousel.events({
    'click [data-sc-move="forward"]': function( event, template ) {
        template.actions.forward();
    }
    //...
});

您想要做的是可能的，但正如您所意识到的，组件共享上下文肯定存在问题。我在上面的代码中看不到任何东西，尽管我怀疑问题可能出在您没有从simple carousel发布的代码中。js@JeremyK我想也可能是这样，明天我回到电脑上时，我会发布更多的代码