JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了javascript – 如何在Handlebars / Ember.js中插入动态{{property}}?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
说我在 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'})];

而且我想通过一个Handlebars模板来运行它,该模板遍历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}}

这基本上是用user.get(field.Name).在Handlebars中,我怎么能做到这一点,因为我不知道手头之前的领域,并希望这是动态的?

谢谢你的帮助.

解决方法

<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: 'email'}
    ]

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

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

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

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

这将解决使用助手在工具栏JS中的问题

大佬总结

以上是大佬教程为你收集整理的javascript – 如何在Handlebars / Ember.js中插入动态{{property}}?全部内容,希望文章能够帮你解决javascript – 如何在Handlebars / Ember.js中插入动态{{property}}?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。