Development Tip

핸들 바-부분적으로 부모 컨텍스트에 액세스 할 수 있습니까?

yourdevel 2020. 12. 12. 12:32
반응형

핸들 바-부분적으로 부모 컨텍스트에 액세스 할 수 있습니까?


하위 요소에 대한 부분을로드하는 핸들 바 템플릿이 있습니다.

부분 내에서 호출 템플릿의 부모 컨텍스트에서 변수에 액세스해야합니다. ..부분 내부에서 아무것도 해결되지 않는 것 같습니다.

단순화 된 코드는 다음과 같습니다.

템플릿

    {{#each items}} 
        {{> item-template}}
    {{/each}}

부분

    value is {{value}}

(분명히 실제 코드는 더 복잡하지만 동일한 원칙이며 부분 내에서 ..정의되지 않은 것처럼 보입니다.)


정의되지 않았 음을 보여주기 whatis위해 다음과 같은 매우 간단한 도우미를 사용했습니다 .

Handlebars.registerHelper('whatis', function(param) {
    console.log(param);
});

위의 코드를 다음과 같이 업데이트했습니다.

업데이트 된 템플릿

    {{#each items}} 
        {{whatis ..}}  <-- Console shows the correct parent context
        {{> item-template}}
    {{/each}}

부분 업데이트

    {{whatis ..}}  <-- Console shows "undefined"
    value is {{value}}

그 문제를 해결할 방법이 있습니까? 내가 뭔가를 놓치고 있습니까?

편집 : 핸들 바의 github 프로젝트 에 대한이 질문과 관련된 미해결 문제가 있습니다 .


누군가이 질문을 우연히 발견하는 경우를 대비하여. 이 기능은 이제 핸들 바에 있습니다.

이 작업을 수행:

{{#each items}} 
    {{! Will pass the current item in items to your partial }}
    {{> item-template this}} 
{{/each}}

작업 바이올린 (AndrewHenderson의 핸들 바 풀 요청 # 385에서 영감을 얻음) http://jsfiddle.net/QV9em/4/

Handlebars.registerHelper('include', function(options) {
    var context = {},
        mergeContext = function(obj) {
            for(var k in obj)context[k]=obj[k];
        };
    mergeContext(this);
    mergeContext(options.hash);
    return options.fn(context);
});

상위 템플릿을 설정하는 방법은 다음과 같습니다.

{{#each items}} 
    {{#include parent=..}}
        {{> item-template}}
    {{/include}}
{{/each}}

그리고 부분 :

value is {{parent}}

현재 2.0.0 파셜 현재 값 전달 지원합니다 .

{{#each items}}
    {{> item-template some_parent_var=../some_parent_var}}
{{/each}}

이것을 찾는 데 잠시 시간이 걸렸습니다. 다른 사람에게도 유용하기를 바랍니다!


부모 컨텍스트를 부분에 전달하는 가장 쉬운 방법은 부분 내부에서 루프를 수행하는 것입니다. 이렇게하면 기본적으로 상위 컨텍스트가 전달되며 부분 내부에서 루프를 수행 할 때 {{../variable}}규칙이 상위 컨텍스트에 액세스 할 수 있습니다.

여기에 예제 바이올린 .

자료

{
  color: "#000"
  items: [
    { title: "title one" },
    { title: "title two" },
  ]
}

템플릿

<div class="mainTemplate">
  Parent Color: {{color}}
  {{> partial}}
</div>

부분

<div>
  {{#each items}}
    <div style="color:{{../color}}">
      {{title}}
    </div>
  {{/each}}
</div>

github 링크의 의견에 제안 된 솔루션 중 일부를 사용할 수 있습니다.

https://github.com/wycats/handlebars.js/issues/182#issuecomment-4206666
https://github.com/wycats/handlebars.js/issues/182#issuecomment-4445747

그들은 부분에 정보를 전달하는 도우미를 만듭니다.


parentContext 키 아래의 하위 컨텍스트 내에 부모 키 / 값을 포함하는 각 도우미 함수를 만들었습니다.

http://jsfiddle.net/AndrewHenderson/kQZpu/1/

참고 : 밑줄은 종속성입니다.

Handlebars.registerHelper('eachIncludeParent', function ( context, options ) {
var fn = options.fn,
    inverse = options.inverse,
    ret = "",
    _context = [];
    $.each(context, function (index, object) {
        var _object = $.extend({}, object);
        _context.push(_object);
    });
if ( _context && _context.length > 0 ) {
    for ( var i = 0, j = _context.length; i < j; i++ ) {
        _context[i]["parentContext"] = options.hash.parent;
        ret = ret + fn(_context[i]);
    }
} else {
    ret = inverse(this);
}
return ret;

});

다음과 같이 사용 :

{{#eachIncludeParent context parent=this}}
    {{> yourPartial}}
{{/eachIncludeParent}}

부분에서 상위 컨텍스트 값에 액세스하려면 {{parentContext.value}}


이와 같은 동적 양식 속성이 필요했습니다 ...

    {{#each model.questions}}
      <h3>{{text}}</h3>

          {{#each answers}}
                {{formbuilder ../type id ../id text}}
            {{/each}}

    {{/each}}

그리고 그런 도우미 ...

    Handlebars.registerHelper('formbuilder', function(type, id, qnum, text, options)
    {
        var q_type = options.contexts[0][type],
            a_id = options.contexts[1].id,
            q_number = options.contexts[0][qnum],
            a_text = options.contexts[1].text;


            return new Handlebars.SafeString(
                    '<input type=' + q_type + ' id=' + a_id + ' name=' + q_number + '>' + a_text + '</input><br/>'
            );
    });

생산하는 ...

<input type="checkbox" id="1" name="surveyQ0">First question</input>

My model is a big blob of arrays and objects mixed together. What's noteworthy is that using '../' like so '../type', passes in the parent model as the context, and without it, such as with 'id', it passes in the current model as the context.

참고URL : https://stackoverflow.com/questions/9411538/handlebars-is-it-possible-to-access-parent-context-in-a-partial

반응형