I have the following handlebars template:
{{#each Lead.leads_controller}}
<tr>
<td>
<strong>{{???}}</strong>
</td>
<td class="plus expander"> </td>
<td>{{company}}</td>
<td>{{web}}/</td>
<td>{{phone_1}}</td>
<td>{{phone_2}}</td>
<td>{{fax}}</td>
</tr>
{{/each}}
I want to show a 1 based index for each row in a table. I know previously the collectionView had contentIndex exposed but this does not appear to be the case for the each helper.
I found this that seems to suggest that this is not available for the each helper. Is there any way of making this possible for the each helper?
Related
I have a list of checkboxes in my template:
<table>
<thead>
<tr>
<th></th>
<th>Sender</th>
<th>Title</th>
</tr>
</thead>
<tbody>
{{#each message in model.entities}}
<tr>
<td class="cell-star">
{{input type="checkbox" name=message.id tabindex=message.id class="starBox" checked=message.isStar }}
</td>
<td class="cell-broadcaster">
{{message.notification.autor.firstName}} {{message.notification.autor.lastName}}
</td>
<td class="cell-title">
{{#link-to 'notifications.details' message.notification.id}}{{message.notification.title}}{{/link-to}} {{#unless message.isRead}} (new) {{/unless}}
</td>
</tr>
{{/each}}
</tbody>
</table>
And now i want to send rest query every time when i change some of the checkbox state with id of changed checkbox.
What should i write in my controller?
i have tried something like that but i cannot get data of changed checkbox:
updateStarStatus: function() {
console.log('checkbox clicked');
//here should be something like that:
//$.getJSON(apiHost + "/api/forum/star/"+id);
}.observes('model.entities.#each.isStar'),
im not using emberData. My model looks like this:
model: function() {
return $.getJSON(apiHost + "/api/forum");
},
You could use the observesBefore method to track the changes and make a diff in the observes method, but I'd rather use the native on change event, to trigger an action and pass the object:
<div {{action "updateStarStatus" message on="change"}}>
{{input type="checkbox" checked=message.isStar}}
and in the controller
actions: {
updateStarStatus: function(message) {
alert(message.id)
}
}
http://emberjs.jsbin.com/zohaqodese/2/
I have really enormous table to handle in Ember.js. At this moment I am using to this job single controller, but it breaks single responsibility principle.
<table>
<thead>
<tr>
<th>First column in first group</th>
<th>Second column in first group</th>
<th>First column in second group</th>
<th>Second column in second group</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{controller.someAction}}</td>
<td>{{controller.otherAction}}</td>
<td>{{controller.someAction2}}</td>
<td>{{controller.otherAction2}}</td>
</tr>
</tbody>
</table>
Instead I would like to group couples of related actions in one controller.
<table>
<thead>
<tr>
<th>First column in first group</th>
<th>Second column in first group</th>
<th>First column in second group</th>
<th>Second column in second group</th>
</tr>
</thead>
<tbody>
<tr>
{{render 'firstGroup' this}}
{{render 'secondGroup' this}}
</tr>
</tbody>
</table>
However, it is not going to work. Ember will place firstGroup in some kind of tag (for instance div), which can't be located directly beetwen <tr> and <td>. I can't use neither <tr>, nor <td> for rendering container.
It would be great if ember could render controller without container's tag. Is there any way to deal with that? Maybe there is special tag in HTML which won't breake my table layout and can be placed in that position? "Actions" in my controller are only calculating values based on model. Maybe Should I use something other than controller?
Yes and no.
You can define the tag to be used for a particular view, unfortunately having it host multiple columns using render would be difficult. So you'd likely need to break it down to individual TDs using render.
<tr>
{{render 'firstGroup' this}}
{{render 'secondGroup' this}}
{{render 'thirdGroup' this}}
{{render 'fourthGroup' this}}
</tr>
App.FirstGroupView = Em.View.extend({
tagName:'td'
});
http://emberjs.jsbin.com/jafanitu/1/edit
That being said, I'd probably break it down at the row level with render, then use partials at the column level
<tbody>
{{render 'row' this}}
</tbody>
<script type="text/x-handlebars" data-template-name="row">
{{partial 'first_group'}}
{{partial 'second_group'}}
{{partial 'third_group'}}
{{partial 'fourth_group'}}
</script>
<script type="text/x-handlebars" data-template-name="_first_group">
<td>
hello world
</td>
</script>
http://emberjs.jsbin.com/jafanitu/2/edit
And then create mixins for handling the logic of each group and add those mixins to your controller, to keep your controller clean. http://emberjs.com/api/classes/Ember.Mixin.html
You can pass parameters to the view being rendered by the {{render}} helper:
{{render "myView" someViewProperty="foo" anotherViewProperty=4}}
Therefore you can set the tagName of your views, so that you get the correct HTML structure:
<table>
<thead>
<tr>
<th>First column in first group</th>
<th>Second column in first group</th>
<th>First column in second group</th>
<th>Second column in second group</th>
</tr>
</thead>
<tbody>
<tr>
{{render 'firstGroup' this tagName="td"}}
{{render 'secondGroup' this tagName="td"}}
</tr>
</tbody>
</table>
I wanted to generate a table with an array that I have in a controller but I don't really understand how does the collectionView is working.
Here are my array :
App.ApplicationView = Ember.View.extend({
accountProfile: null, //
actions: {
[...] //Action that initialize the accountProfile (object)
}
})
My array is accessible like this => view.accountProfile.dialInNumbers when I want to display on a template.
So now I have a table, but it must respect some standards like that :
<table class="table-history">
<tr>
<td class="col-left">+44734567890</td>
<td>
<div class="ph-img"></div>
</td>
<td>
<div class="tr-img"></div>
</td>
</tr>
</table>
Most likely what you have in the <tr> tag is what must be generated by the view. Most likely I will always have the first <td> that will change from the array in the view. The others <td> are meant to be the same every row.
My problem is that I don't really know how I can manage to create the collectionView and add the different class name with the others <td> in the same row..
I have seen some people doing this :
myView.appendTo('.table-history');
or even like this :
{#collection App.myView}}
<td>{{content}}</td>
{{/collection}}
But I'm kinda lost in this..
[EDIT]
I manage to make it works like this :
App.CallBackListView = Ember.CollectionView.extend({
tagName: 'tbody',
content: ['A','B','C']
})
{{#collection App.CallBackListView}}
<td class="col-left">{{content}}</td>
<td>
<div class="ph-img"></div>
</td>
<td>
<div class="tr-img"></div>
</td>
{{/collection}}
But I have one problem here, is that there is display in {{content}}. I don't really understand this..
I want to render a table using emberjs templates. The table should resolve the columns to be rendered dynamically:
<table>
{{#each item in this.items}}
<tr>
{{#each colName in this.columnNames}}
<td>{{item.[colName]}}</td>
{{/each}}
</tr>
{{/each}}
</table>
However, I think handlebars tries to access the property colName of an item. How can I access the property dynamically?
UPDATE: As Visualize pointed out in the comments, there is now a native get helper. You should prefer that over the implementation below (which may not update properly with newer versions of Ember.)
I'm not sure if Handlebars is able to dynamically resolve a variable like that (at least out of the box). I would probably write my own helper.
Ember.Handlebars.helper('getProperty', function(object, property, options) {
return Ember.get(object, property);
});
Then in your template:
{{#each item in items}}
<tr>
{{#each colName in columnNames}}
<td>{{getProperty item colName}}</td>
{{/each}}
</tr>
{{/each}}
And if my understanding of Ember bindings is correct, the helper should re-render any time item or colName is changed.
{{#each item in items}}
<tr>
{{#each colName in columnNames}}
<td>{{get item colName}}</td>
{{/each}}
</tr>
{{/each}}
Using get helper.
Thank you.
Is it possible to access properties in a value-for-key style in Handlebars?
I have a CollectionView which uses an ArrayController full of models. The CollectionView has a property called 'columns' that define table column configurations for rendering.
Ideally I'd be able to loop through each column (see example below) ensuring that only the columns we want rendered are rendered (and later, formatting and other attributes are applied)
<tr>
{{#each column in view.controller.columns}}
<td>
{{ view.content.[column.name] }}
</td>
{{/each}}
</tr>
This doesn't work, it just returns no content.
I've also tried these other styles to see if they'd work:
<tr>
{{#each column in view.controller.columns}}
<td>
{{ view.content.name }}
{{ view.content.[column.name] }}
{{valForKey view.content column.name }}
</td>
{{/each}}
</tr>
The valForKey helper is one I wrote (source here), which does display the correct value but doesn't bind, so the value isn't updated when the property changes.
What's the best way to handle this use case in Ember?
Thanks
Right now Ember has get helper included:
{{get object key}}
You can create a bound helper to display the value of the column
Ember.Handlebars.registerBoundHelper('dd', function(rowData, col) {
return rowData[col];
});
See the following SO answer for more details
https://stackoverflow.com/a/27477602/908842