使用把手迭代javascript对象

Lee*_*lla 3 javascript ruby-on-rails coffeescript handlebars.js

我正在尝试使用Handlebars注册帮助程序以允许迭代JSON对象. 这个要点看起来是一个合适的解决方案.我将其转换为以下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
Run Code Online (Sandbox Code Playgroud)

在模板中:

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

{{#each_with_key categories key="category_id"}}
I'M ALIVE!!
{{/each_with_key}}
Run Code Online (Sandbox Code Playgroud)

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

mu *_*ort 7

您的JavaScript到CoffeeScript音译被破坏了.您不使用for ... in迭代CoffeeScript中的对象,您使用for k, v of ...:

使用of过的物体,而不是在阵列中的值的属性的信号理解.

这个CoffeeScript循环:

for x in y
    ...
Run Code Online (Sandbox Code Playgroud)

成为这个JavaScript:

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

所以,如果y是一个没有目标length属性,然后_lenundefined和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
Run Code Online (Sandbox Code Playgroud)

如果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('')
Run Code Online (Sandbox Code Playgroud)

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