Passando variáveis ​​pelo guidão parcial

Atualmente, estou lidando com handlebars.js em um aplicativo express.js. Para manter as coisas modulares, divido todos os meus modelos em parciais.

Meu problema : não consegui encontrar uma maneira de passar variáveis ​​através de uma invocação parcial. Digamos que eu tenho um parcial que se parece com isso:

<div id=myPartial>
    <h1>Headline<h1>
    <p>Lorem ipsum</p>
</div>

Vamos supor que registrei esta parcial com o nome 'myPartial'. Em outro modelo, posso dizer algo como:

<section>
    {{> myPartial}}
</section>

Isso funciona bem, a parcial será renderizada conforme o esperado e eu sou um desenvolvedor feliz. Mas o que eu preciso agora é de uma maneira de passar variáveis ​​diferentes por essa invocação, para verificar de forma parcial, por exemplo, se um título é fornecido ou não. Algo como:

<div id=myPartial>
    {{#if headline}}
    <h1>{{headline}}</h1>
    {{/if}}
    <p>Lorem Ipsum</p>
</div>

E a invocação deve ser algo como isto:

<section>
    {{> myPartial|'headline':'Headline'}}
</section>

ou então.

Eu sei que sou capaz de definir todos os dados necessários antes de renderizar um modelo. Mas eu preciso de uma maneira de fazer isso, como acabei de explicar. Existe uma maneira possível?

Parciais do guidão usam um segundo parâmetro que se torna o contexto da parcial:

{{> person this}}

Nas versões v2.0.0 alfa e posterior, você também pode transmitir um hash de parâmetros nomeados:

{{> person headline='Headline'}}

Você pode ver os testes para estes cenários: https://github.com/wycats/handlebars.js/blob/ce74c36118ffed1779889d97e6a2a1028ae61510/spec/qunit_spec.js#L456-L462 https://github.com/wycats/handlebars.js/ blob / e290ec24f131f89ddf2c6aeb707a4884d41c3c6d / spec / parcials.js # L26-L32

Apenas no caso, aqui está o que eu fiz para obter argumentos parciais, mais ou menos. Eu criei um pequeno ajudante que leva um nome parcial e um hash de parâmetros que serão passados ​​para o parcial:

Handlebars.registerHelper('render', function(partialId, options) {
  var selector = 'script[type="text/x-handlebars-template"]#' + partialId,
      source = $(selector).html(),
      html = Handlebars.compile(source)(options.hash);

  return new Handlebars.SafeString(html);
});

O principal aqui é que os auxiliares do guidão aceitam um hash de argumentos do tipo Ruby . No código auxiliar, eles vêm como parte do último argumento da função options- - em seu hashmembro. Dessa forma, você pode receber o primeiro argumento - o nome parcial - e obter os dados depois disso.

Então, você provavelmente deseja devolver um Handlebars.SafeStringdo ajudante ou usar o "esconderijo triplo" - {{{- para impedir que ele escape duas vezes.

Aqui está um cenário de uso mais ou menos completo:

<script id="text-field" type="text/x-handlebars-template">
  <label for="{{id}}">{{label}}</label>
  <input type="text" id="{{id}}"/>
</script>

<script id="checkbox-field" type="text/x-handlebars-template">
  <label for="{{id}}">{{label}}</label>
  <input type="checkbox" id="{{id}}"/>
</script>

<script id="form-template" type="text/x-handlebars-template">
  <form>
    <h1>{{title}}</h1>
    {{ render 'text-field' label="First name" id="author-first-name" }}
    {{ render 'text-field' label="Last name" id="author-last-name" }}
    {{ render 'text-field' label="Email" id="author-email" }}
    {{ render 'checkbox-field' label="Private?" id="private-question" }}
  </form>
</script>

Espero que isso ajude ... alguém. :)

Isso é muito possível se você escrever seu próprio ajudante. Estamos usando um $auxiliar personalizado para realizar esse tipo de interação (e mais):

/*///////////////////////

Adds support for passing arguments to partials. Arguments are merged with 
the context for rendering only (non destructive). Use `:token` syntax to 
replace parts of the template path. Tokens are replace in order.

USAGE: {{$ 'path.to.partial' context=newContext foo='bar' }}
USAGE: {{$ 'path.:1.:2' replaceOne replaceTwo foo='bar' }}

///////////////////////////////*/

Handlebars.registerHelper('$', function(partial) {
    var values, opts, done, value, context;
    if (!partial) {
        console.error('No partial name given.');
    }
    values = Array.prototype.slice.call(arguments, 1);
    opts = values.pop();
    while (!done) {
        value = values.pop();
        if (value) {
            partial = partial.replace(/:[^\.]+/, value);
        }
        else {
            done = true;
        }
    }
    partial = Handlebars.partials[partial];
    if (!partial) {
        return '';
    }
    context = _.extend({}, opts.context||this, _.omit(opts, 'context', 'fn', 'inverse'));
    return new Handlebars.SafeString( partial(context) );
});

Isso também pode ser feito em versões posteriores do guidão usando a key=valuenotação:

 {{> mypartial foo='bar' }}

Permitindo que você passe valores específicos para o seu contexto parcial.

Referência: Contexto diferente para o parcial # 182

A resposta aceita funciona muito bem se você deseja apenas usar um contexto diferente na sua parcial. No entanto, não permite que você faça referência a nenhum contexto pai. Para passar vários argumentos, você precisa escrever seu próprio auxiliar. Aqui está um auxiliar de trabalho para o guidão 2.0.0(a outra resposta funciona para versões <2.0.0):

Handlebars.registerHelper('renderPartial', function(partialName, options) {
    if (!partialName) {
        console.error('No partial name given.');
        return '';
    }
    var partial = Handlebars.partials[partialName];
    if (!partial) {
        console.error('Couldnt find the compiled partial: ' + partialName);
        return '';
    }
    return new Handlebars.SafeString( partial(options.hash) );
});

Em seguida, no seu modelo, você pode fazer algo como:

{{renderPartial 'myPartialName' foo=this bar=../bar}}

E no seu parcial, você poderá acessar esses valores como contexto, como:

<div id={{bar.id}}>{{foo}}</div>

Parece que você quer fazer algo assim:

{{> person {another: 'attribute'} }}

Yehuda já lhe deu uma maneira de fazer isso:

{{> person this}}

Mas para esclarecer:

Para fornecer dados parciais a seus próprios dados, basta fornecer seu próprio modelo dentro do modelo existente, da seguinte forma:

{{> person this.childContext}}

Em outras palavras, se este é o modelo que você está dando ao seu modelo:

var model = {
    some : 'attribute'
}

Em seguida, adicione um novo objeto a ser dado à parcial:

var model = {
    some : 'attribute',
    childContext : {
        'another' : 'attribute' // this goes to the child partial
    }
}

childContexttorna-se o contexto do parcial como Yehuda disse - nisso, ele apenas vê o campo another, mas não vê (ou se preocupa com o campo some). Se você tivesse idno modelo de nível superior e repita idnovamente no childContext, isso funcionará muito bem, pois a parcial só vê o que está dentro childContext.

Sim, cheguei atrasado, mas posso adicionar aos usuários do Assemble : você pode usar o "parseJSON"auxiliar de montagem http://assemble.io/helpers/helpers-data.html . (Descoberto em https://github.com/assemble/assemble/issues/416 ).

Não tenho certeza se isso é útil, mas aqui está um exemplo de modelo de guidão com parâmetros dinâmicos passados ​​para um RadioButtons parcial em linha e o cliente (navegador) processando os botões de opção no contêiner.

Para meu uso, ele é renderizado com guidão no servidor e permite que o cliente finalize. Com ele, uma ferramenta de formulários pode fornecer dados embutidos no Guiador sem auxiliares.

Nota: Este exemplo requer jQuery

{{#*inline "RadioButtons"}}
{{name}} Buttons<hr>
<div id="key-{{{name}}}"></div>
<script>
  {{{buttons}}}.map((o)=>{
    $("#key-{{name}}").append($(''
      +'<button class="checkbox">'
      +'<input name="{{{name}}}" type="radio" value="'+o.value+'" />'+o.text
      +'</button>'
    ));
  });
  // A little test script
  $("#key-{{{name}}} .checkbox").on("click",function(){
      alert($("input",this).val());
  });
</script>
{{/inline}}
{{>RadioButtons name="Radio" buttons='[
 {value:1,text:"One"},
 {value:2,text:"Two"}, 
 {value:3,text:"Three"}]' 
}}