Handlebarjs块辅助函数(简单的奇偶属性添加到每一行数组)与需求

handlebarjs block helper function (simple odd even attribute to add on each row of array) with requirejs

本文关键字：一行 需求 数组 属性 函数 简单 Handlebarjs 奇偶 添加      更新时间：2023-09-26

我将handlebarjs包含在我的需求骨干应用程序中，我想在模板上实现行类助手定义(奇数|偶数)，

我正在尝试将本地handlebar helper 'port'到一个基于(requirejs)的模块:http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers

与handlebarjs插件的需求:https://github.com/SlexAxton/require-handlebars-plugin

这是我到目前为止得到的oddevenhelper.js: 

define(['handlebars'], function ( Handlebars ){
  function oddevenhelper(array, even, odd, fn, elseFn) {
      if (array && array.length > 0) {
        var buffer = "";
        for (var i = 0, j = array.length; i < j; i++) {
            var item = array[i];
            // we'll just put the appropriate stripe class name onto the item for now
            item.stripeClass = (i % 2 == 0 ? even : odd);
            // show the inside of the block
            buffer += fn(item);
        }
        // return the finished buffer
        return buffer;
      } else {
        return elseFn();
      }
  };
  Handlebars.registerHelper( 'oddevenhelper', oddevenhelper );
  return oddevenhelper;
});

，这是我的样本模板:

<div class="orderssummary-list">
        {{#oddevenhelper orderssummary "even" "odd"}}
            <div class="ordersummary-list-item {{stripeClass}}">
                <a class="addone"><i class="icon-chevron-up icon-white"></i></a>
                <a class="minusone"><i class="icon-chevron-down icon-white"></i></a>
                <div class="item-quantity">{{quantity}}x</div><div class="item-name">{{item_name}}</div> {{total}}
                <div class="clearfix">
            </div>
        {{/oddevenhelper}}
    </div>

helper运行，但是handlebar抛出错误，我猜是在模板上声明为未定义或根本没有的第3或第4个参数上。

我错过了什么吗?或者我只是让上下文(orderssummary)被重新定义，以包括行类?

Hbs helper被完全定义为常规Handlebars helper:它们在选项散列中接收模板函数和逆函数，而不是作为常规参数。你的函数应该看起来像

function oddevenhelper(array, even, odd, options)
    var fn = options.fn,
        elseFn = options.inverse;
    ...
}

和提琴http://jsfiddle.net/snZHu/

相关文章：