Question

假设我在 JavaScript 中有一个 < code> user 模型, 看起来像这样 :

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 })];

我想通过一个手动栏模板运行它, 它在 < code> User 类上的每个字段中运行, 为它创建一个页眉, 然后对每个用户设定值 :

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

我的问题是,我如何实现这个内部部分:

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

s 基本上是在做 user.get(field.name) 。在手头的字段我不知道,所以我如何才能做到?

谢谢你的帮助

Answer 1

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

这将用JS处理器中的帮手解决我们的问题

友情链接