핸들 바-부분적으로 부모 컨텍스트에 액세스 할 수 있습니까?
하위 요소에 대한 부분을로드하는 핸들 바 템플릿이 있습니다.
부분 내에서 호출 템플릿의 부모 컨텍스트에서 변수에 액세스해야합니다. ..
부분 내부에서 아무것도 해결되지 않는 것 같습니다.
단순화 된 코드는 다음과 같습니다.
템플릿
{{#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.
'Development Tip' 카테고리의 다른 글
Firefox 및 SSL : sec_error_unknown_issuer (0) | 2020.12.12 |
---|---|
기본 제공 검색 / 필터 상자를 사용하지 않고 jqGrid 데이터를 필터링하는 방법 (0) | 2020.12.12 |
float 컬렉션에 대한 Python 단위 테스트의 assertAlmostEqual (0) | 2020.12.12 |
날짜 시간 x 시리즈에 대한 엑셀 플롯 (0) | 2020.12.12 |
플라스크에서 ajax에서 게시 된 데이터를 어떻게 사용할 수 있습니까? (0) | 2020.12.12 |