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吗？我对如何以更好/不同的方式做这些建议持开放态度。

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

要解决此问题，我只需将局部变量/操作移动到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中重用相同的块助手会导致奇怪的上下文问题

1 个答案: