2012-01-30 14 views
7

Ho due oggetti che desidero rendere affiancati. Non c'è mai un caso in cui vorrò rendere di più o meno di due. Il mio modello è configurato in questo modo:Rendering di un baffo parziali più volte con dati diversi

{ 
    obj1: {...}, 
    obj2: {...} 
} 

Uso dei modelli baffi, voglio rendere ogni oggetto utilizzando lo stesso parziale:

<div> 
    <h1>Object 1</h1> 
    {{>objPartial}} 
</div> 
<div> 
    <h1>Object 2</h1> 
    {{>objPartial}} 
</div> 

Tuttavia, i baffi non sembra sostenere il superamento di un contesto per la parziale. Fare qualcosa come {{>objPartial obj1}} sembra come dovrebbe essere supportato, ma non riesco a trovare alcuna documentazione sull'impostazione di un contesto per un parziale.

Questo tipo di cose è supportato? In caso contrario, come posso ottenere lo stesso effetto senza duplicare il parziale (objPartial1 e objPartial2)?

risposta

9

La sintassi penso stai cercando è non {{>objPartial obj1}}, ma dovrebbe essere

{{#obj1}} 
{{>objPartial}} 
{{/obj1}} 

La sintassi per {{#}} non è solo per gli array: per gli oggetti non array, l'oggetto diventa parte dell'ambito corrente.

ho biforcato esempio di maxbeatty e modificato per mostrare questa sintassi:

<script type="template/text" id="partial"> 
    <ul> 
     {{#name}} 
     <li>{{.}}</li> 
     {{/name}} 
    </ul> 
</script> 

<script type="template/text" id="main"> 
    <div> 
     <h1>Stooges</h1> 
     {{#object1}} 
     {{>objPartial}} 
     {{/object1}} 
    </div> 
    <div> 
     <h1>Musketeers</h1> 
     {{#object2}} 
     {{>objPartial}} 
     {{/object2}} 
    </div> 
</script>​ 

<script type="text/javascript">  
    var partial = $('#partial').html(), 
     main = $('#main').html(), 
     data = { 

      object1: { 
       name: ["Curly", "Moe", "Larry"]}, 
      object2: { 
       name: ["Athos", "Porthos", "Aramis", "D'Artagnan"]} 

     }, 
     html = Mustache.to_html(main,data, { 
      "objPartial": partial 
     }); 
    document.write(html); 
</script> 

Link jsfiddle: http://jsfiddle.net/YW5zF/3/

+0

Anche se ho dato spostato su da questo problema, questa risposta è effettivamente corretta. Grazie a Doug Fish! – mikefrey

1

Si può regolare il vostro modello per includere il h1 e div così si potrebbe ciclare su un elenco invio di dati diverse per objPartial ogni volta

<script type="template/text" id="partial"> 
    <ul> 
     {{#name}} 
     <li>{{.}}</li> 
     {{/name}} 
    </ul> 
</script> 

<script type="template/text" id="main"> 
    {{#section}} 
    <div> 
     <h1>{{title}}</h1> 
     {{>objPartial}} 
    </div> 
    {{/section}} 
</script> 

<script type="text/javascript"> 
var partial = $('#partial').html(), 
    main = $('#main').html(), 
    data = { 
     section: [ 
      { 
      title: "Object 1", 
      name: ["Curly", "Moe", "Larry"]}, 
     { 
      title: "Object 2", 
      name: ["Athos", "Porthos", "Aramis", "D'Artagnan"]} 
     ] 
    }, 
    html = Mustache.to_html(main,data, { 
     "objPartial": partial 
    }); 
document.write(html); 
</script> 

See it on jsFiddle

Problemi correlati