不可预测的行为车把助手反向循环答案

【问题标题】：Unpredictable Behaviour handlebars helper reverse for loop不可预测的行为车把助手反向循环
【发布时间】：2014-07-20 16:46:35
【问题描述】：

我为车把模板创建了这个辅助函数

Handlebars.registerHelper('reverse_for', function(from, to, decrease, block) {
    var result = '';
    for(var i = from; i >= to; i -= decrease)
        result += block.fn(i);
    return result;
});

代码似乎运行异常。它有时有效，有时不返回 {{ this }} 的值（在 handlebars.js 模板中），尽管它具有正确的输入并在正确数量的项目上循环。

这就是我在 handlebars.js 模板中输出它的方式

<div class="form-group">
    <label>Bar Width {{baseComponents.bar.product.max_width}} - {{baseComponents.bar.product.min_width}}</label>
    <select class="form-control csb-bar-width-selector">
        {{#reverse_for baseComponents.bar.product.max_width baseComponents.bar.product.min_width 1}}
            <option value="{{this}}">{{this}} inches</option>
        {{/reverse_for}}
    </select>
</div>

同样，它有时也有效。这是第一次工作但第二次没有工作的示例。当我重新加载它可能完全或根本不工作。

同样，有时 {{ this }} 会输出正确的值，有时则不正确。我认为问题在于辅助函数以及我如何构建结果。任何帮助表示赞赏。

【问题讨论】：

标签： javascript ember.js handlebars.js

【解决方案1】：

Handlebars.registerHelper('reverse_for', function(from, to, decrease, options) {
    var result = String('');
    for(var i = parseInt(from); i >= parseInt(to); i -= parseInt(decrease))
    {
        result += String(options.fn({'index':parseInt(i)}));
    }
    return result;
});

似乎没有问题。

在我现在使用的模板中

{{ index }}

而不是

{{ this }}

输出值

parseInt 和 String 强制转换似乎不会影响异常结果，但将其作为只有索引键的对象返回似乎没有这种奇怪的行为。

【讨论】：

【解决方案2】：

      Handlebars.registerHelper('each_reverse',function (context, options) {
      var fn = options.fn, inverse = options.inverse;
      var length = 0, ret = "", data;

      if (Handlebars.Utils.isFunction(context)) { context = context.call(this); }

      if (options.data) {
        data = Handlebars.createFrame(options.data);
      }

      if(context && typeof context === 'object') {
        if (Handlebars.Utils.isArray(context)) {
            length=context.length;
          for(var j = context.length-1; j >= 0; j--) {//no i18n
            if (data) {
              data.index = j;
              data.first = (j === 0);
              data.last  = (j === (context.length-1));
            }
            ret = ret + fn(context[j], { data: data });
          }
        } else {
                var keys = Object.keys(context);
                length=keys.length;
                for(j=length; j>=0;j--)
                {
                    var key = keys[j-1]
                    if(context.hasOwnProperty(key)) {
                        if(data) { 
                            data.key = key; 
                            data.value = context[key];
                            data.index = j;
                            data.first = (j === 0);
                          }
                          ret += fn(context[key], {data: data});
                    }
                }
        }
      }

      if(length === 0){
        ret = inverse(this);
      }

      return ret;
    } );

【讨论】：