12

基本的なキー/値辞書として使用されている Ember.Object があります。キーの名前は動的であり、私ができるようにしたいのは、これらのプロパティを反復処理することです。これは簡単なように思えますが、Google 検索と私の集合的な頭のかき傷は、私が期待していた明らかな答えを示していないようです。

次の疑似コードの場合:

App.MyObject = Ember.Object.extend({
    randomComputedProperty: function() {
        return "foobar";
    }     
}
$object = new MyObject.create(someBigAndUnpredictableNameValueHash);

私の理想的な解決策は、このコードを解決して、すぐに識別できるようにすることです。

  • 重要: 持つプロパティ名のobject配列
  • 理想的には: 計算されたプロパティ名のobject配列
  • Icing-on-the-Top: getter に沿って setter を含む計算されたプロパティの配列

とにかくアイデアはありますか？

- - - アップデート - - -

私の正確なユースケースについてもう少し明確にするために。架空のMyObjectものは、実際には私のモデルの 1 つから得られるプロパティです。

App.MyModel = DS.Model.extend({
    prop1: DS.attr('string'),
    prop2: DS.attr('number'),
    prop3: DS.attr('my-object')
}

シリアライゼーション/デシリアライゼーションを処理するために Transform オブジェクトが設定されている場所:

App.MyObjectTransform = DS.Trnasform.extend({
    deserialize: function(serialized) {
        return App.MyObject.create(serialized)
    },
    deserialize: function(deserialized) {
        return deserialized;
    }
}

このようにしMyModelて、ハンドルバー テンプレートで作業しているときに、次のようなことができます。

{{prop1}}
{{prop2}}
{{#each prop3}}
    {{key}} = {{value}}
{{/each}}
4

2 に答える 2

8

ここにいくつかのアイデアがあります。

オブジェクトのキーの方法 1

プロパティを反復処理し、hasOwnProperty()プロトタイプ チェーンからキーを除外できます (メソッドを使用):

var obj = App.MyObject.create({stuff: "stuff!"});

var objKeys = []
for(var key in obj) {
  if(obj.hasOwnProperty(key)){
    objKeys.push(key);
  }
}
console.log(objKeys); // ['stuff']

オブジェクトのキーの方法 2

新しいブラウザーでは、Object.keys()メソッドを使用してオブジェクトのプロパティの配列を直接取得できます。

console.log(Object.keys(obj)); // ['stuff']

Ember.Object の計算されたプロパティ

Ember は、メソッドを使用してクラスの計算されたプロパティを反復処理する方法を提供しますeachComputedProperty()

App.MyObject.eachComputedProperty(function(name, meta){
  console.log(name, meta);  // randomComputedProperty
});

これらのメソッドを示す JSBin の例

アップデート

MyObjectのデータをハンドルバーで表示できる配列に再配置する計算されたプロパティをモデルに持つことができます。

App.MyModel = DS.Model.extend({
  prop1: DS.attr('string'),
  prop2: DS.attr('number'),
  prop3: DS.attr('my-object'),

  prop3PropertyArray: function(){
    var prop3, 
        propertyArray = [];

    prop3 = this.get('prop3');

    for(var key in prop3) {
      if(prop3.hasOwnProperty(key) && key !== "toString"){
        propertyArray.push({key: key, value: prop3.get(key)});
      }
    }

    return propertyArray;
  }.property('prop3')
});

含まれている場合prop3:

prop3: App.MyObject.create({
  stuff: "stuff!",
  anotherRandomKey: "more value here"
})

次に、次prop3PropertyArrayのようになります。

[
  {
    key: "stuff",
    value: "stuff!"
  },
  {
    key: "anotherRandomKey",
    value: "more value here"
  }
]

{{#each}}..{{/each}}これは、ヘルパーを使用してハンドルバーに表示できます。

{{#each item in prop3PropertyArray}}
  {{item.key}} = {{item.value}}<br>
{{/each}}

更新された JSBin の例

于 2013-10-12T17:24:08.963 に答える