使用帮助程序的流星条件 HTML

meteor conditional html using helpers

本文关键字:条件 HTML 流星 帮助程序      更新时间:2023-09-26

新手问题在这里...我正在尝试启动一个简单的流星应用程序,但在调用我的一个辅助函数时遇到问题(它似乎被忽略了)。

基本上,我

不想使用稍微不同的html调用,具体取决于我是否使用集合中的第一项。

我在集合 (seq) 中添加了一个从 0 开始的序列号,在模板上创建了一个帮助程序函数

Template.carousel.helpers({
  sponsors: function() {
    return sponsorDocs.find();
  },
  first_sponsor: function() {
    console.log(this);
    var value = (this.seq === 0);
    if(value) {
      console.log("Got first sponsor");
    }
    else {
      console.log("Not the first sponsor");
    }
    return value;
  }
});

并尝试在模板中使用它,如下所示。.

<template name="carousel">
<!-- Carousel
================================================== -->
<div id="tbCarousel" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    {{#each sponsors}}
      {{#if first_sponsor}}
        <li data-target="#tbCarousel" data-slide-to={{seq}} class= "active" ></li> 
      {{else}}
        <li data-target="#tbCarousel" data-slide-to={{seq}} ></li> 
      {{/if}}
    {{/each}}
  </ol>........

现在,每个都工作正常,但first_sponsor调用似乎从未发生过(无论如何我从未看到控制台日志输出......

知道为什么吗?无论如何,有没有更好的方法来做到这一点(看起来确实有点笨拙)。

彼得。

为每个 li 添加一些视觉效果。 是否显示 1、2 或两者?

执行此操作的另一种方法是仅让帮助程序返回类名(活动或空白),class="{{sponsor_class}}"添加:我们可能会知道正在走错误的道路,然后质疑为什么。一个常见的原因是 JavaScript 失败。您知道您的网络浏览器控制台吗?