¿Cómo se interpola una dinámica {{property}} en Handlebars/Ember.js?

Decir que tengo un modelo User en JavaScript que se ve algo como esto:¿Cómo se interpola una dinámica {{property}} en 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'})];

Y quiero ejecutarlo a través de una plantilla de manillares que pasa a través de cada campo en la clase User, crea una cabecera para ello, y a continuación, para cada usuario hace que los valores:

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

Mi pregunta es, ¿cómo lograr que una parte interna:

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

Eso es básicamente hacer user.get(field.name). ¿Cómo puedo hacer eso en Handlebars, dado que no conozco los campos de antemano y quiero que esto sea dinámico?

Gracias por su ayuda.

Fuente

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>

esto va a resolver un problema utilizando ur ayudantes en el manillar JS

Fuente

2012-05-23 12:43:33 Jeevi

¿hay alguna solución elegante en lugar de este corte. – Amerrnath

No es que el manubrio sea malo. Pero incluso la implementación Ember 2.5.x del manubrio es horrible. Si quieres hacer algo dinámico, tienes que escribir un montón de manillas "hacky" que ayudan a JavaScript. Vengo de usar Angular y con eso simplemente colocas un {{myJavaScriptFunctionThatReturnsDynamicData (item)}} en tu HTML y listo. – RyanNerd

-3

Puede escribir un ayudante de manubrio para que lo haga por usted.

Fuente

2012-05-23 05:08:09 ebryn

¿Cómo se interpola una dinámica {{property}} en Handlebars/Ember.js?

Respuesta

Cuestiones relacionadas