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

Question

我正在尝试重用我编写的自定义 Block Helper，为我的一些模板提供基本轮播功能。

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

简单-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();
  }
});

breaking_stories.html

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

breaking_stories.js

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

daily_summary.html

<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。不管怎样，如您所见，我已经定义了#SimpleCarousel 块帮助器并在两个地方使用了它：突发新闻部分和每日摘要部分。这两个模板刚好在同一个页面（路由），所以在页面上靠得很近。我需要其中一个自动循环，其中我向助手提供了 autoForward 属性，另一个应该只显示控件。

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

我的问题是，我可以在同一条路线上安全地多次使用自定义 Block Helpers 吗？我愿意接受有关如何以 better/different 方式执行此操作的任何建议。

Answer 1

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

这是我在旧版本中的内容：

simple_carousel.js

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 和所有其他的都是共享的。

为了解决这个问题，我只是将本地 variables/actions 移动到 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();
    }
    //...
});

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

Reusing the same block helper in Meteor causes odd context issue

javascript

meteor

meteor-blaze