Come si interpola una {{property}} dinamica in Handlebars/Ember.js?

Dire che ho un modello User in JavaScript che sembra qualcosa di simile:Come si interpola una {{property}} dinamica in Handlebars/Ember.js?

var User = function(attributes) { 
    this.attributes = attributes; 
} 

User.fields = [ 
    {name: 'firstName'}, 
    {name: 'lastName'}, 
    {name: 'email'} 
] 

User.prototype.get = function(key) { 
    return this.attributes[key]; 
} 

User.all = [new User({firstName: 'Foo'})];

E voglio correre attraverso un modello di manubrio che passa attraverso ogni campo sulla classe User, crea un'intestazione per esso, e quindi per ogni utente rende i valori:

<table> 
    <thead> 
    <tr> 
     {{#each User.fields}} 
     <th>{{name}}</th> 
     {{/each}} 
    </tr> 
    </thead> 
    <tbody> 
    {{#each User.all}} 
    <tr> 
     {{#each User.fields}} 
     <td>{{content.get(name)}}</td> 
     {{/each}} 
    </tr> 
    {{/each}} 
    </tbody> 
</table>

la mia domanda è: come faccio a realizzare che una parte interna:

{{#each User.fields}} 
<td>{{content.get(name)}}</td> 
{{/each}}

In pratica sta facendo user.get(field.name). Come posso farlo in Handlebars, dato che non conosco i campi in anticipo e voglio che questo sia dinamico?

Grazie per il vostro aiuto.

fonte

2012-05-23 Lance Pollard

<body> 
    <div id='displayArea'></div> 
    <script id="template" type="text/x-handlebars-template"> 
    <table border="2"> 
     <thead> 
     <tr> 
      {{#each Fields}} 
      <th>{{name}}</th> 
      {{/each}} 
     </tr> 
     </thead> 
     <tbody> 
      {{#each users}} 
      <tr> 
      {{#each ../Fields}} 
      <td>{{getName name ../this}}</td> 
      {{/each}} 
      </tr> 
     {{/each}} 
     </tbody> 
    </table> 
</script> 

<script type="text/javascript"> 
    var User = function(attributes) { 
     this.attributes = attributes; 
    } 

    User.fields = [ 
     {name: 'firstName'}, 
     {name: 'lastName'}, 
     {name: 'email'} 
    ] 

    User.prototype.get = function(key) { 
     return this.attributes[key]; 
    } 

    User.all = [new User({firstName: 'Foo',lastName :'ooF',email : '[email protected]'}) , new User({firstName: 'Foo2'})];  //array of user 

    //handle bar functions to display 
    $(function(){ 
     var template = Handlebars.compile($('#template').html()); 

     Handlebars.registerHelper('getName',function(name,context){ 
          return context.get(name); 
      }); 
     $('#displayArea').html(template({Fields :User.fields,users:User.all})); 
    }); 
    </script> 
    </body>

questo risolverà il problema ur utilizzando aiutanti nel manubrio JS

fonte

2012-05-23 12:43:33 Jeevi

c'è qualche soluzione elegante, piuttosto che questo hack. – Amerrnath

Non è che il manubrio sia cattivo. Ma anche l'implementazione Ember 2.5.x dei manubri è orribile. Se vuoi fare qualcosa di dinamico devi scrivere un gruppo di JavaScript "maneggevoli" per il manubrio. Vengo dall'uso di Angular e con esso hai semplicemente inserito un {{myJavaScriptFunctionThatReturnsDynamicData (item)}} nel tuo HTML e il gioco è fatto. – RyanNerd

-3

È possibile scrivere un helper di Handlebars per farlo.

fonte

2012-05-23 05:08:09 ebryn

Come si interpola una {{property}} dinamica in Handlebars/Ember.js?

risposta

Problemi correlati