Wie interpoliert man eine dynamische {{property}} in Handlebars/Ember.js?

sagen, dass ich ein User Modell in JavaScript, die etwa wie folgt aussieht:Wie interpoliert man eine dynamische {{property}} 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'})];

Und ich will laufen sie durch einen Lenker Vorlage, die auf der User Klasse durch jedes Feld geht, schafft einen Header für sie, und dann für jeden Benutzer rendert die Werte:

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

Meine Frage ist, wie ich das interne Teil erreichen kann:

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

Das geht im Grunde user.get(field.name). Wie kann ich das in Lenker machen, da ich die Felder vorher nicht kenne und möchte, dass dies dynamisch ist?

Danke für Ihre Hilfe.

Quelle

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>

Dies wird ur Problem mit Helfern in Lenkern JS löst

Quelle

2012-05-23 12:43:33 Jeevi

gibt es eine elegante Lösung, anstatt diesen Hack. – Amerrnath

Es ist nicht so, dass der Lenker schlecht ist. Aber sogar Ember 2.5.x Implementierung von Lenkern ist schrecklich. Wenn Sie etwas Dynamisches machen wollen, müssen Sie einen Haufen "hacky" Lenker-Helfer JavaScript schreiben. Ich komme von der Verwendung von Angular und damit einfach ein {{myJavaScriptFunctionThatReturnsDynamicData (item)}} in Ihren HTML-Code und Sie sind fertig. – RyanNerd

-3

Sie können einen Lenker-Helfer schreiben, um dies für Sie zu tun.

Quelle

2012-05-23 05:08:09 ebryn

Wie interpoliert man eine dynamische {{property}} in Handlebars/Ember.js?

Antwort

Verwandte Themen