Gidon / Bıyık - Bir nesnenin özellikleri arasında dolaşmak için yerleşik bir yol var mı?

Soru başlığının dediği gibi, bir nesne özellikleri arasında döngü yapmanın bir bıyık / gidon yolu var mı?

Böylece

var o = {
  bob : 'For sure',
  roger: 'Unknown',
  donkey: 'What an ass'
}

Sonra şablon motorunda eşdeğer bir şey yapabilir miyim

for(var prop in o)
{
    // with say, prop a variable in the template and value the property value
}

?

Gidon 1.0rc1'den beri yerleşik destek

Bu işlev için destek Handlebars.js'e eklenmiştir , bu nedenle harici yardımcılara gerek yoktur.

Bu nasıl kullanılır

Diziler için:

{{#each myArray}}
    Index: {{@index}} Value = {{this}}
{{/each}}

Nesneler için:

{{#each myObject}}
    Key: {{@key}} Value = {{this}}
{{/each}}

Yalnızca hasOwnPropertytesti geçen özelliklerin numaralandırılacağını unutmayın.

Aslında bir yardımcı olarak uygulanması oldukça kolaydır:

Handlebars.registerHelper('eachProperty', function(context, options) {
    var ret = "";
    for(var prop in context)
    {
        ret = ret + options.fn({property:prop,value:context[prop]});
    }
    return ret;
});

Sonra şöyle kullanın:

{{#eachProperty object}}
    {{property}}: {{value}}<br/>
{{/eachProperty }}

DÜZENLEME: Gidonların artık bunu gerçekleştirmek için yerleşik bir yolu var; bkz seçilen cevabı yukarıda. Sade Bıyık ile çalışırken, aşağıdakiler hala geçerlidir.

Bıyık, bir dizideki öğeleri yineleyebilir. Bu yüzden, Bıyık'ın çalışabileceği şekilde biçimlendirilmiş ayrı bir veri nesnesi oluşturmanızı öneririm:

var o = {
  bob : 'For sure',
  roger: 'Unknown',
  donkey: 'What an ass'
},
mustacheFormattedData = { 'people' : [] };

for (var prop in o){
  if (o.hasOwnProperty(prop)){
    mustacheFormattedData['people'].push({
      'key' : prop,
      'value' : o[prop]
     });
  }
}

Şimdi, Bıyık şablonunuz şuna benzer:

{{#people}}
  {{key}} : {{value}}
{{/people}}

"Boş Listeler" bölümüne bakın: https://github.com/janl/mustache.js

Bu @ Ben'in cevabı Ember ile kullanılmak üzere güncellenmiştir ... Ember.getbağlam, bir String olarak iletildiğinden kullanmanız gerektiğini unutmayın .

Ember.Handlebars.registerHelper('eachProperty', function(context, options) {
  var ret = "";
  var newContext = Ember.get(this, context);
  for(var prop in newContext)
  {
    if (newContext.hasOwnProperty(prop)) {
      ret = ret + options.fn({property:prop,value:newContext[prop]});
    }
  }
  return ret;
});

Şablon:

{{#eachProperty object}}
  {{key}}: {{value}}<br/>
{{/eachProperty }}

@ Amit'in yanıtı iyi çünkü hem Bıyıkta hem de Gidonda çalışacak.

Sadece gidon çözümleri ile ilgili olarak, birkaç tane gördüm ve en iyi https://gist.github.com/1371586 adresindekieach_with_key blok yardımcısını beğendim .

• Öncelikle onları yeniden yapılandırmanıza gerek kalmadan nesne değişmezlerini yinelemenizi sağlar ve
• Anahtar değişken dediğin şey üzerinde kontrol sağlar. Birçok başka çözümler ile adlandırılmış nesne tuşlarını kullanarak konusunda dikkatli olmak zorunda 'key', ya da 'property'vb

Ben'in çözümü için teşekkürler, kullanım durumum sadece belirli alanları sırayla görüntülemek için

nesne ile

Kod:

    handlebars.registerHelper('eachToDisplayProperty', function(context, toDisplays, options) {
    var ret = "";
    var toDisplayKeyList = toDisplays.split(",");
    for(var i = 0; i < toDisplayKeyList.length; i++) {
        toDisplayKey = toDisplayKeyList[i];
        if(context[toDisplayKey]) {
            ret = ret + options.fn({
                property : toDisplayKey,
                value : context[toDisplayKey]
            });
        }

    }
    return ret;
});

Kaynak nesne:

   { locationDesc:"abc", name:"ghi", description:"def", four:"you wont see this"}

Şablon:

{{#eachToDisplayProperty this "locationDesc,description,name"}}
    <div>
        {{property}} --- {{value}}
    </div>
    {{/eachToDisplayProperty}}

Çıktı:

locationDesc --- abc
description --- def
name --- ghi

Bu, verileri önceden biçimlendirmeden ve bunun yerine oluşturma sırasında almadan mustacheJS için yardımcı bir işlevdir.

var data = {
    valueFromMap: function() {
        return function(text, render) {
            // "this" will be an object with map key property
            // text will be color that we have between the mustache-tags
            // in the template
            // render is the function that mustache gives us

            // still need to loop since we have no idea what the key is
            // but there will only be one
            for ( var key in this) {
                if (this.hasOwnProperty(key)) {
                    return render(this[key][text]);
                }
            }
        };
    },

    list: {
        blueHorse: {
            color: 'blue'
        },

        redHorse: {
            color: 'red'
        }
    }
};

Şablon:

{{#list}}
    {{#.}}<span>color: {{#valueFromMap}}color{{/valueFromMap}}</span> <br/>{{/.}}
{{/list}}

Çıktılar:

color: blue
color: red

(sıra rastgele olabilir - bu bir harita) İstediğiniz harita öğesini biliyorsanız bu yararlı olabilir. Sadece falsi değerlerine dikkat edin.

1.0.beta.6Gidonların eski sürümünü kullanıyordum , 1.1 - 1.3 sırasında bir yere bu işlevsellik eklendiğini düşünüyorum, bu yüzden 1.3.0'a güncelleme sorunu çözdü, işte kullanım:

Kullanımı:

{{#each object}}
  Key {{@key}} : Value {{this}}
{{/people}}