рули - возможно ли получить доступ к родительскому контексту в частичном? - PullRequest
57 голосов
/ 23 февраля 2012

У меня есть шаблон руля, который загружает частичное для подэлемента.

Мне нужно было бы получить доступ к переменной из родительского контекста в вызывающем шаблоне изнутри частичного..., кажется, не разрешает ничего внутри частичного.

Упрощенный код выглядит следующим образом:

шаблон

    {{#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

Ответы [ 7 ]

39 голосов
/ 04 февраля 2013

На всякий случай, если кто-нибудь наткнется на этот вопрос. Эта функциональность теперь существует в руле.

Сделайте это:

{{#each items}} 
    {{! Will pass the current item in items to your partial }}
    {{> item-template this}} 
{{/each}}
22 голосов
/ 03 августа 2013

Рабочая скрипка (по запросу Эндрю Хендерсона # 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}}
9 голосов
/ 14 апреля 2015

По состоянию на 2.0.0 partials теперь поддерживает передачу значений .

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

Мне понадобилось время, чтобы найти это, надеюсьэто полезно и для кого-то еще!

3 голосов
/ 23 февраля 2014

Самый простой способ передать родительский контекст в партиал - это выполнить цикл внутри партиала. Таким образом, родительский контекст передается по умолчанию, и когда вы делаете цикл внутри партиала, соглашение {{../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>
3 голосов
/ 11 июня 2012

Вы можете использовать некоторые из предложенных решений в комментариях по ссылке на github:

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

Они создают помощников для передачи информации вчастично.

2 голосов
/ 04 декабря 2012

Я создал каждую вспомогательную функцию, которая включает родительский ключ / значения в подконтексте под ключ 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}}

0 голосов
/ 06 апреля 2014

Мне нужны были атрибуты динамической формы для чего-то вроде этого ...

    {{#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>

Моя модель представляет собой большой массив массивов и объектов, смешанных вместе.Следует отметить, что при использовании «../», например, «../type», в качестве контекста передается родительская модель, а без него, например, с «id», в качестве контекста - текущая модель.

...