如何让 Ember.js 把手 #each 迭代对象？

Question

我正在尝试使{{#each}}助手遍历一个对象，就像在香草把手中一样。 不幸的是，如果我在一个对象上使用 #each，Ember.js 版本会给我这个错误：

Assertion failed: The value that #each loops over must be an Array. You passed [object Object]

我写了这个助手来试图解决这个问题：

Ember.Handlebars.helper('every', function (context, options) {
  var oArray = [];
  for (var k in context) {
    oArray.push({
      key   : k,
      value : context[k]
    })
  }
  return Ember.Handlebars.helpers.each(oArray, options);
});

现在，当我尝试使用{{#every}} ，出现以下错误：

Assertion failed: registerBoundHelper-generated helpers do not support use with Handlebars blocks.

这似乎是一个基本功能，我知道我可能遗漏了一些明显的东西。 任何人都可以帮忙吗？

编辑：

这是一个小提琴： http : //jsfiddle.net/CbV8X/

Answer 1

使用{{each-in}}助手。 你可以像{{each}}助手一样使用它。

例子：

{{#each-in modelWhichIsObject as |key value|}}
  `{{key}}`:`{{value}}`
{{/each-in}}

JS Bin 演示。

Answer 2

在摆弄了几个小时之后，我想出了这个 hacky 方法：

Ember.Handlebars.registerHelper('every', function(context, options) {
  var oArray = [], actualData = this.get(context);

  for (var k in actualData) {
    oArray.push({
      key: k,
      value: actualData[k]
    })
  }

  this.set(context, oArray);
  return Ember.Handlebars.helpers.each.apply(this, 
      Array.prototype.slice.call(arguments));
});

我不知道this.set有什么影响，但这似乎有效！

这是一个小提琴： http : //jsfiddle.net/CbV8X/1/

Answer 3

我一直在追求类似的功能，因为我们正在分享我们的hacky方式，这是我不耐烦的小提琴： http : //jsfiddle.net/L6axcob8/1/

这个小提琴基于@lxe 提供的小提琴，由@Kingpin2k 更新，然后是我自己。

Ember：1.9.1，把手：2.0.0，jQuery 2.1.3

---

在这里，我们添加了一个名为every的助手，它可以迭代对象和数组。

例如这个模型：

model: function() {
    return {
        properties: {
            foo: 'bar',
            zoo: 'zar'
        }
    };
}

可以使用以下把手模板进行迭代：

<ul class="properties">
    {{#every p in properties}}
    <li>{{p.key}} : {{p.value}}</li>
    {{/every}}
</ul>

---

every助手的工作方式是从对象键创建一个数组，然后通过 ArrayController 协调对 Ember 的更改。 是的，哈奇。 但是，如果该对象支持 [] 属性的观察，那么让我们向/从对象添加/删除属性。

在我的用例中，我有一个 Ember.Object 派生类，它在添加/删除属性时通知 []。 我建议查看 Ember.Set 以获得此功能，尽管我发现 Set 最近已被弃用。 由于这稍微超出了这个问题的范围，我将其作为练习留给读者。 这是一个提示：setUnknownProperty

---

为了收到属性更改的通知，我们将非对象值包装在我称之为DataValueObserver 中，它设置（目前是一种方式）绑定。 这些绑定在我们内部 ArrayController 持有的值和我们正在观察的对象之间提供了一座桥梁。

处理对象时； 我们将它们包装在 ObjectProxy 中，这样我们就可以引入一个“关键”成员，而无需修改对象本身。 为什么是的，这确实意味着您可以递归地使用 #every。 读者的另一个练习;-)

我建议让你的模型基于 Ember.Object 以与 Ember 的其余部分保持一致，允许你通过它的 get & set 处理程序来操纵你的模型。 或者，如小提琴中所示，您可以使用 Em.Get/Em.set 来访问模型，只要您这样做是一致的。 如果您直接触摸您的模型（没有获取/设置），那么every都不会收到您的更改通知。

Em.set(model.properties, 'foo', 'asdfsdf');

---

为了完整起见，这是我的every帮手：

var DataValueObserver = Ember.Object.extend({
    init: function() {
        this._super();
        // one way binding (for now)
        Em.addObserver(this.parent, this.key, this, 'valueChanged');
    },
    value: function() {
        return Em.get(this.parent, this.key);
    }.property(),
    valueChanged: function() {
        this.notifyPropertyChange('value');
    }
});

Handlebars.registerHelper("every", function() {
    var args = [].slice.call(arguments);
    var options = args.pop();
    var context = (options.contexts && options.contexts[0]) || this;

    Ember.assert("Must be in the form #every foo in bar ", 3 == args.length && args[1] === "in");
    options.hash.keyword = args[0];
    var property = args[2];

    // if we're dealing with an array we can just forward onto the collection helper directly
    var p = this.get(property);
    if (Ember.Array.detect(p)) {
        options.hash.dataSource = p;
        return Ember.Handlebars.helpers.collection.call(this, Ember.Handlebars.EachView, options);
    }

    // create an array that we will manage with content
    var array = Em.ArrayController.create();
    options.hash.dataSource = array;
    Ember.Handlebars.helpers.collection.call(this, Ember.Handlebars.EachView, options);

    //
    var update_array = function(result) {
        if (!result) {
            array.clear();
            return;
        }

        // check for proxy object
        var result = (result.isProxy && result.content) ? result.content : result;
        var items = result;

        var keys = Ember.keys(items).sort();

        // iterate through sorted array, inserting & removing any mismatches
        var i = 0;
        for ( ; i < keys.length; ++i) {
            var key = keys[i];
            var value = items[key];
            while (true) {
                var old_obj = array.objectAt(i);
                if (old_obj) {
                    Ember.assert("Assume that all objects in our array have a key", undefined !== old_obj.key);
                    var c = key.localeCompare(old_obj.key);
                    if (0 === c) break; // already exists
                    if (c < 0) {
                        array.removeAt(i); // remove as no longer exists
                        continue;
                    }
                }

                // insert
                if (typeof value === 'object') {
                    // wrap object so we can give it a key
                    value = Ember.ObjectProxy.create({
                        content: value,
                        isProxy: true,
                        key: key
                    });
                    array.insertAt(i, value);
                } else {
                    // wrap raw value so we can give it a key and observe when it changes
                    value = DataValueObserver.create({
                        parent: result,
                        key: key,
                    });
                    array.insertAt(i, value);
                }
                break;
            }
        }
        // remove any trailing items
        while (array.objectAt(i)) array.removeAt(i);
    };

    var should_display = function() {
        return true;
    };

    // use bind helper to call update_array if the contents of property changes
    var child_properties = ["[]"];
    var preserve_context = true;
    return Ember.Handlebars.bind.call(context, property, options, preserve_context, should_display, update_array, child_properties);
});

灵感来自：

• 如何让 Ember.js 把手 #each 迭代对象？
• http://mozmonkey.com/2014/03/ember-getting-the-index-in-each-loops/
• https://github.com/emberjs/ember.js/issues/4365
• https://gist.github.com/strathmeyer/1371586

如果你错过了，这里又是那个小提琴：

• http://jsfiddle.net/L6axcob8/1/