使用把手迭代 javascript 对象答案

【问题标题】：Iterating over javascript objects with handlebars使用把手迭代 javascript 对象
【发布时间】：2012-02-24 12:02:35
【问题描述】：

我正在尝试使用 Handlebars 注册帮助程序以允许迭代 JSON 对象。 This gist 看起来是一个合适的解决方案。我将其转换为以下 CoffeeScript。当我使用任何一个助手时，似乎什么都没有发生（对于 vanilla JavaScript 和 CoffeeScript 版本都是如此）。有什么想法吗？

$ ->
  Handlebars.registerHelper "key_value", (obj, fn)->
    buffer = ""
    key 
    for key in obj 
      if obj.hasOwnProperty(key)
        buffer += fn({key: key, value: obj[key]})
    buffer

  Handlebars.registerHelper "each_with_key", (obj, fn)->
    context
    buffer = ""
    key 
    keyName = fn.hash.key
    for key in obj 
      if obj.hasOwnProperty(key)
        context = obj[key]
        if keyName
          context[keyName] = key 
          buffer += fn(context)
    buffer

在模板中：

{{#key_value categories}}
I'M ALIVE!!
{{/key_value}}

{{#each_with_key categories key="category_id"}}
I'M ALIVE!!
{{/each_with_key}}

我目前在 Gemfile 中使用 gem 'handlebars-assets' 将把手添加到 rails 应用程序。

【问题讨论】：

标签： javascript ruby-on-rails coffeescript handlebars.js

【解决方案1】：

您的 JavaScript 到 CoffeeScript 的音译已损坏。你不使用for ... in 来遍历CoffeeScript 中的对象，你使用for k, v of ...：

使用of 表示理解对象的属性而不是数组中的值。

这个 CoffeeScript 循环：

for x in y
    ...

变成这个 JavaScript：

for (_i = 0, _len = y.length; _i < _len; _i++) {
  x = a[_i];
  ...
}

所以如果y 是一个没有length 属性的对象，那么_len 将是undefined 并且JavaScript 的for(;;) 循环根本不会迭代。

您还应该使用own 而不是hasOwnProperty：

如果您只想迭代对象本身上定义的键，通过添加hasOwnProperty 检查以避免可能从原型中迭代的属性，请使用for own key, value of object。

但这更多是为了方便而不是正确。

此外，CoffeeScript 循环是表达式，因此您通常会说 array = expr for own k, v in o 或等效形式：

array = for own k, v in o
    expr

如果expr 超过一行或太长而无法理解。

CoffeeScript 中帮助程序的正确且更惯用的版本看起来更像这样：

Handlebars.registerHelper "key_value", (obj, fn)->
    (fn(key: key, value: value) for own key, value of obj).join('')

Handlebars.registerHelper "each_with_key", (obj, fn)->
    key_name = fn.hash.key
    buffer   = for own key, value of obj
        value[key_name] = key
        fn(value)
    buffer.join('')

演示：http://jsfiddle.net/ambiguous/LWTPv/

【讨论】：