[javascript] 핸들 바 / 콧수염-객체의 속성을 반복하는 내장 된 방법이 있습니까?

JAVASCRIPT / 글쓴이

질문의 제목에서 알 수 있듯이 콧수염 / 핸들 바로 객체 속성 을 반복하는 방법이 있습니까?

그래서 

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

나는 무언가 할 수있는 템플릿 엔진 에 해당 할 것

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

?

답변

핸들 바 1.0rc1부터 내장 지원

이 기능에 대한 지원이 Handlebars.js 에 추가 되었으므로 더 이상 외부 헬퍼가 필요하지 않습니다.

사용 방법

배열의 경우 :

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

객체의 경우 :

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

hasOwnProperty테스트를 통과 한 속성 만 열거됩니다.

답변

실제로 도우미로 구현하는 것은 매우 쉽습니다.

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

그런 다음 다음과 같이 사용하십시오.

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

답변

편집 : 핸들 바에는 이제이 작업을 수행하는 기본 제공 방법이 있습니다. 위 의 선택된 답변을 참조하십시오 . 일반 콧수염으로 작업 할 때 아래 사항이 여전히 적용됩니다.

콧수염은 배열의 항목을 반복 할 수 있습니다. 따라서 콧수염이 작동하는 방식으로 형식이 지정된 별도의 데이터 객체를 만드는 것이 좋습니다.

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]
     });
  }
}

이제 콧수염 템플릿은 다음과 같습니다.

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

https://github.com/janl/mustache.js에서 “비빈 목록”섹션을 확인하십시오.

답변

이것은 Ember와 함께 사용하기 위해 업데이트 된 @ Ben의 대답입니다 … Ember.getcontext가 String으로 전달되기 때문에 사용해야 합니다.

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;
});

주형:

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

답변

@Amit의 대답은 Mustache와 Handlebars 모두에서 작동하기 때문에 좋습니다.

핸들 바 전용 솔루션에 관해서는 몇 가지를 보았 each_with_key으며 https://gist.github.com/1371586 의 블록 도우미 가 가장 좋습니다.

  • 객체 리터럴을 먼저 재구성하지 않고도 객체 리터럴을 반복 할 수 있습니다.
  • 키 변수를 제어 할 수 있습니다. 다른 많은 솔루션 'key'에서는 이름이 , 또는 'property'등의 객체 키를 사용할 때주의해야합니다 .

답변

Ben의 솔루션에 감사드립니다. 사용 사례는 특정 필드 만 순서대로 표시합니다.

객체와 함께

암호:

    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;
});

소스 객체 :

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

주형:

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

산출:

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

답변

이것은 데이터를 사전 형식화하지 않고 렌더링 중에 데이터를 가져 오지 않고 mustacheJS에 대한 헬퍼 기능입니다.

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'
        }
    }
};

주형:

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

출력 :

color: blue
color: red

(순서가 임의 일 수 있습니다-지도 인 경우) 원하는지도 요소를 알고있는 경우 유용 할 수 있습니다. 잘못된 값만 조심하십시오.