2012-02-23 14 views
57

Ho un modello di manubrio che carica un partial per un elemento secondario.manubri - è possibile accedere al contesto genitore in un parziale?

Avrei bisogno di accedere a una variabile dal contesto padre nel modello chiamante, all'interno del parziale. .. non sembra risolvere nulla all'interno del parziale.

codice semplificato va in questo modo:

il modello

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

parziale

value is {{value}} 

(ovviamente il codice reale è più complicato, ma è lo stesso principio, all'interno del parziale .. sembra non definito.)


per mostrare che è indefinito, ho usato un semplice aiutante whatis come questo:

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

e aggiornato il codice di cui sopra a questo:

aggiornato modello

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

aggiornato parziale

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

Esiste un modo per andare in giro tale questione? Mi sto perdendo qualcosa?

EDIT: C'è una questione aperta relativa a questa domanda su handlebars' github project

risposta

3

È possibile utilizzare alcune delle soluzioni proposte sui commenti dal collegamento a GitHub:

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

Crea aiutanti per passare le informazioni al parziale.

+0

bene, ovviamente .. – Ben

+0

Sì! A volte ci manca l'ovvia ricerca di altre soluzioni. Almeno fino a quando pubblicheranno un traguardo o una nuova versione. – rcdmk

+0

Questa è solo una soluzione incredibilmente poco elegante – Marc

2

Ho creato ciascuna funzione di supporto che include la chiave/i valori principali all'interno del sottocontext sotto il tasto parentContext.

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

Nota: Underscore è una dipendenza.

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; 

});

deve essere utilizzato come segue:

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

valori contesto genitoriale accesso nel parziale utilizzando {{parentContext.value}}

+0

Come si risolve il problema? inoltre, c'è una 'var option =' che non sembra essere utilizzata successivamente .. – Ben

+0

Se si utilizza questo helper, si avrà accesso a un oggetto nel modello parziale che contiene tutti i valori, sia il genitore che il oggetto figlio. È fondamentalmente un contesto unito. – AndrewHenderson

+0

Nota: i valori figlio e genitore si troveranno sullo stesso livello in quel punto. – AndrewHenderson

36

Solo nel caso qualcuno si imbatte in questa domanda. Questa funzionalità esiste ora in Handlebars.

Fate questo:

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

Grazie @ james-andres. Buono a sapersi che è finalmente arrivato. Gli darò un giro per confermare .. – Ben

+0

Questo dovrebbe essere contrassegnato come la risposta accettata. – lbergnehr

+14

Appena testato questo. Doenst lavoro per me purtroppo. Il contesto genitore non viene passato. "this" si riferisce solo agli articoli [: index] in modo che il contesto genitore venga omesso. E se passi "..", che includerebbe il contesto genitore, non puoi accedere all'elemento corrente nel parziale. – Hans

21

violino di lavoro (ispirato da manubrio tirare richiesta # 385 da AndrewHenderson) 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); 
}); 

Ecco come ci si impostare il modello di genitore:

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

E il parziale:

value is {{parent}} 
+3

Ho preferito questo approccio per la sua pulizia e flessibilità rispetto agli altri – mynameistechno

+1

nel manubrio 2.0, questa funzionalità [sarà inclusa] (https://github.com/wycats/handlebars.js/pull/182) – Jason

+0

Questo è fantastico. Tieni presente che se passi un partial in un partial devi fare riferimento al genitore in questo modo: '{{parent.parent.id}}' –

3

Il modo più semplice per passare il contesto padre al parziale consiste nel fare il ciclo all'interno del parziale. In questo modo il contesto genitore viene passato per impostazione predefinita e quando si esegue il ciclo all'interno del partial la convenzione {{../variable}} può accedere al contesto genitore.

example fiddle here.

I Dati

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

Il modello

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

Il parziale

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

avevo bisogno f dinamica orm attributi per qualcosa di simile ...

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

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

    {{/each}} 

e di un aiutante in questo modo ...

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

che produce ...

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

Il mio modello è un grande blob di matrici e oggetti mescolati insieme. Ciò che è degno di nota è che l'uso di '../' come così '../type', passa nel modello genitore come contesto, e senza di esso, come con 'id', passa nel modello corrente come contesto.

+0

Che non ha molto a che fare con la domanda .. – Ben

7

A partire da 2.0.0partials now supports passing in values.

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

Mi ha portato un po 'per trovare questo, spero che sia utile per qualcun altro troppo!

Problemi correlati