无法在流星中使用车把@first 数据属性

Posted 2023-03-08

【中文标题】无法在流星中使用车把@first 数据属性

【英文标题】：unable to use handlebars @first data propriety in meteor

【发布时间】：2019-10-23 01:36:50

【问题描述】：

我正在将我过去的车把项目渲染到一个流星应用程序中，但它似乎不支持 @data 属性。就像 @first 我用来创建反应式幻灯片一样。

var carousel = [
    
        film:"img_1.jpg",
        desc:"the first"
    ,
    
        film:"img_2.jpg",
        desc:"the second"
    ,
    
        film:"img_3.jpg",
        desc:"the third"
    
];

Template.hello.helpers(net:carousel);

<div id="MyCarousel" class="carousel slide" data-ride="carousel">

    <div class="col-md-9">
        <ol class="carousel-indicators">
            <li id="data-target" data-slide-to="0" 
                             class="active"> </li>
            <li id="data-target" data-slide-to="1"> </li>
            <li id="data-target" data-slide-to="2"> </li>
        </ol>
      <div class="carousel-inner" role="listbox">
        #each net
        <div class="carousel @index">
          <img class="first-slide" >
          <div class="container">
            <div class="carousel-caption">
              <div class="col-md-8">
                <h2>JAX 2015</h2>
                <hr/>
                <p>desc</p>
                </div>
                  <div class="col-md-4">
                    <div class="carousel-image">
                      <img src="film"  
                               />
                    </div>
                  </div>
                </div>
              </div>
            </div>
           /each
        </div>
                .....
    </div>
  </div>

我想知道是否有办法通过外部包或简单的js函数绕过限制。

【问题讨论】：

似乎第一部分是文本而不是代码，无论如何它是我在模板中使用的数组和助手

【参考方案1】：

第三方包

有一个包叫raix:handlebar-helpers，实现了$last等帮助器，见：https://atmospherejs.com/raix/handlebar-helpers

Blaze 内置变量

Blaze 有一个内置的特殊变量@index，可以在#each 的主体内部使用它来获取序列中当前渲染值的从0 开始的索引。

更多详情请见http://blazejs.org/api/spacebars.html#Each。

然而，这需要进一步的工作来使用它来实现 first / last 助手。

【讨论】：

您可以添加到您的答案中，如果只需要第一个元素，那么实现它以支持包是有意义的，而当需要更多像 last 和 eq 这样的助手时，包是有意义的。