How to display comma seperated list into table in EmberJS?
Question
Ok, I have Array [ "1,john", "2,jane", "3,zack" ]
At present it is displayed as
I want to display as
How to to this
My code
<!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>
2 answers
solution1
1 2016-08-26 19:10:40
This should be simple by just adding html tags to break to the next line. Also make sure you wrap you handle bars property in three curly braces to make sure that handlebars knows that you are not only passing strings but also html tags. Make sure you check this tutorial on handlebars expressions for deeper details..... I haven't tested but I hope you get the picture...
<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>
solution2
1 ACCPTED 2016-08-26 19:24:33
Use someArray instead of testArray and if you have default testArray in your app then you have to convert it to someArray and set it into App now inside each handlebar use value.id and 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.