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

自Ember v2.0.0-beta.1 以来，您可以使用{{each-in}}帮助程序迭代HTMLBars中的对象属性。你可以像{{each}} helper一样使用它。

示例：

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

JS Bin demo.

Answer 2

在摆弄了几个小时之后，我想出了这种愚蠢的方式：

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，Handlebars：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的更改来工作。是的，hacky。但是，如果对象支持观察[]属性，我们可以在对象中添加/删除属性。

在我的用例中，我有一个Ember.Object派生类，它在添加/删除属性时通知[]。我建议看看Ember.Set这个功能，虽然我看到Set最近被弃用了。由于这稍微超出了这个问题范围，我将把它作为读者的练习。这是一个提示：setUnknownProperty

要收到有关属性更改的通知，我们将非对象值包装在我所谓的 DataValueObserver 中，该 DataValueObserver 设置（当前单向）绑定。这些绑定提供了我们的内部ArrayController持有的值与我们正在观察的对象之间的桥梁。

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

我建议让你的模型基于Ember.Object与Ember的其余部分保持一致，允许你通过它的get＆amp; amp;操纵你的模型。设置处理程序。或者，如小提琴中所示，只要您保持一致，就可以使用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);
});

灵感来自：

如果你错过了，那就再说一遍：

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

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

3 个答案: