Question

好的，我有Array [＆＃34; 1，john＆＃34;，＆＃34; 2，jane＆＃34;，＆＃34; 3，zack＆＃34; ]

目前它显示为

我想显示为

如何到达

我的代码

<!DOCTYPE html>
<html>
   <head> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="http://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="http://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>

      <script type="text/x-handlebars">
         {{outlet}}
      </script>


      <script type="text/x-handlebars" data-template-name="index">

      <table>       
            <tr>
                <th>Id</th>
                <th>Name</th>
            </tr>
            <tr>
                {{#each value in App.testData}}
                <td>{{value}}</td>
            {{/each}}
            </tr>
      </table>  

      </script>

      <script type="text/javascript">
         var App = Ember.Application.create()         
        var someArray = [ {
                        'id':1,
                        'name':'john'
                    },{
                        'id':2,
                        'name':'jane'
                    },{
                        'id':3,
                        'name':'zack'
                    }];

        App.testData = someArray.map( function( el )
                    { 
                       return el.id + ',' + el.name; 
                    }); 
      </script>
   </body>
</html>

Answer 1

这应该很简单，只需添加html标签即可打破下一行。另外，请确保在三个花括号中包裹手柄栏属性，以确保手柄知道您不仅传递字符串而且还传递html标记。请确保您在handlebars expressions上查看本教程以获取更深入的详细信息.....我还没有测试过，但我希望您能了解到这一点......

<script type="text/x-handlebars" data-template-name="index">

      <table>
        <thead>    
            <tr>
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thread>
        <tbody>
            <tr>
                {{#each value in App.testData}}
                <tr>{{{value}}}</tr>
               {{/each}}
            </tr>
         </tbody>
      </table>  
      </script>

      <script type="text/javascript">
         var App = Ember.Application.create()         
        var someArray = [ {
                        'id':1,
                        'name':'john'
                    },{
                        'id':2,
                        'name':'jane'
                    },{
                        'id':3,
                        'name':'zack'
                    }];

        App.testData = someArray.map( function( el )
                    { 
           return '<td>' + el.id + '</td>' + ',' + '<td>' + el.name + '</td>'; 
                    }); 
      </script>

Answer 2

使用someArray代替testArray，如果您的应用中有默认testArray，则必须将其转换为someArray并将其设置为应用现在在each车把内使用value.id和value.name

     <!DOCTYPE html>
  <html>
     <head> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
        <script src="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
        <script src="http://builds.emberjs.com/release/ember.debug.js"></script>
        <script src="http://builds.emberjs.com/beta/ember-data.js"></script>
     </head>
     <body>

        <script type="text/x-handlebars">
           {{outlet}}
        </script>


        <script type="text/x-handlebars" data-template-name="index">

        <table>       
              <tr>
                  <th>Id</th>
                  <th>Name</th>
              </tr>
              <tr>
                  {{#each value in App.someArray}}
                  <td>{{value.id}}</td>
      <td>{{value.name}}</td>
              {{/each}}
              </tr>
        </table>  

        </script>

        <script type="text/javascript">
          var App = Ember.Application.create()    
          var testData =  [ "1,john", "2,jane", "3,zack" ];  
          App.someArray = testData.map(function(e){
                            var [id,name] = e.split(",");
                            return {
                              id:id,
                              name:name
                            }
                          })
        </script>
     </body>
  </html>

如何在EmberJS中将逗号分隔列表显示到表中？

2 个答案: