使用句柄迭代JavaScript对象 [英] Iterating over javascript objects with handlebars

问题描述

我试图注册帮助程序与Handlebars允许迭代JSON对象。 这个提示看起来像一个适当的解决方案。我把它转换成下面的CoffeeScript。没有什么似乎发生，当我使用任一帮助者（这适用于香草JavaScript和CoffeeScript版本）。任何想法？

I am trying to register helpers with Handlebars to allow iterating over JSON objects. This gist looked like an appropriate solution. I converted that into the following CoffeeScript. Nothing seems to happen when I use either of the helpers (that holds true for both vanilla JavaScript and the CoffeeScript version). Any ideas?

$ ->
  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}}

我目前使用 gem

I am currently using gem 'handlebars-assets' in the Gemfile to add handlebars to a rails app.

推荐答案

您的JavaScript中的'handlebars-assets'到CoffeeScript音译被打破。您不需要使用 for 在CoffeeScript中迭代对象，就可以使用 for k，v of ... ：

Your JavaScript to CoffeeScript transliteration is broken. You don't use for ... in to iterate over an object in CoffeeScript, you use for k, v of ...:

code> of 来对一个对象的属性而不是数组中的值进行信号理解。

Use of to signal comprehension over the properties of an object instead of the values in an array.

此CoffeeScript循环：

This CoffeeScript loop:

for x in y
    ...

成为此JavaScript：

becomes this JavaScript:

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

因此，如果 y 是没有长度属性的对象，则 _len 将是 undefined 和<; c $ c> for（;;）循环将不会迭代。

So if y is an object without a length property, then _len will be undefined and the JavaScript for(;;) loop won't iterate at all.

您还应该使用自己的而不是 hasOwnProperty ：

如果你想迭代对象本身上定义的键，通过添加 hasOwnProperty 检查以避免属性可以从原型中插入，使用作为自己的键，对象的值

If you would like to iterate over just the keys that are defined on the object itself, by adding a hasOwnProperty check to avoid properties that may be interited from the prototype, use for own key, value of object.

but that's more for convenience than correctness.

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

Also, CoffeeScript loops are expressions so you'd usually say array = expr for own k, v in o or the equivalent form:

array = for own k, v in o
    expr

如果 expr

CoffeeScript中一个正确的和更为成熟的助手的版本看起来更像这样：

A correct and more idiomatic version of your helpers in CoffeeScript would look more like this:

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/

这篇关于使用句柄迭代JavaScript对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！