Emberjs create a table with CollectionView - ember.js

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

Related

Ember list of checkbox on check one send rest

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/

Emberjs CollectionView array in an array

Hi I would like to know if it was possible to use a more complex array for the collectionView.
Because for now I'm only using it like this :
App.GroupList = Ember.ArrayController.create({
content: ['A','B','C','D'],
})
App.GroupListView = Ember.CollectionView.extend({
tagName: 'tbody',
contentBinding: "App.GroupList"
})
And display them like this :
<table class="table-history">
{{#collection App.GroupListView}}
<td class="col-left">
{{view.content}}
</td>
<td>
<span class="col-number-contact">0</td>
</td>
<td>
<div class="ph-img"></div>
</td>
<td>
<div class="ed-img"></div>
</td>
{{/collection}}
</table>
So far, so good, its working well, but I would like to add more information inside the content like this :
content: [
['A','1'],
['B','2'],
['C','3'],
]
And display the number in a second <td> tad (the one with the 0 inside).
But its not working.. and I wouldn't even know how to display them in my template.
Someone already managed to passe a complex collection content ?
You can use an array of objects instead like this:
App.GroupList = Ember.ArrayController.create({
content: [{'id':1,val:'A'},{'id':2,val:'B'},{'id':3,val:'C'},{'id':4,val:'D'}];
});
Then in your template, you can access it like this:
<table class="table-history">
{{#collection App.GroupListView}}
<td class="col-left">
{{view.content.val}}
</td>
<td>
<span class="col-number-contact">{{view.content.id}}</td>
</td>
<td>
<div class="ph-img"></div>
</td>
<td>
<div class="ed-img"></div>
</td>
{{/collection}}
</table>

Ember Data Access App initialization

at the moment im really frustrated. I ll try to get table filled with some data of my database. Therefore i have a controller and a View.
App.TableController.extend({
content: [],
contentBinding:'App.incidient.content'
})
App.TableView = Ember.CollectionView.extend({
tagName: 'tbody',
itemViewClass: Ember.View.extend({
templateName: 'table'
})
My html code looks like this:
<div class="row-fluid">
<table class="table table-striped">
<thead>
<tr>
<th>
Title
</th>
<th>
Customer
</th>
<th>
Machine
</th>
<th>
Priortity
</th>
<th>
Status
</th>
</tr>
<thead>
{{view App.TableView}}
</table>
</div>
</script>
<script type="text/x-handlebars" data-template-name="table">
{{#each item in content}}
<td>
{{view item.incidient.title}}
</td>
<td>
{{view item.incidient.customer}}
</td>
<td>
{{view item.incidient.machine}}
</td>
<td>
{{view item.incidient.priority}}
</td>
<td>
{{view item.incidient.status}}
</td>
{{/each}}
</script>
Im not frustrated because of my the code that is not working. It is more about the fact that:
i dont find any good guide or post where i can see how to debug my Application. The Debugging tool from Chrome doesnt help at all, because i can't figure out how to get access to the content of my TableController or better where i can find it.
i dont understand where the App is initializing all of my Controllers and how i can access them. With the old router: it was like 'App.router.myController' but this is not working anymore.
i dont know how to access datas from a different controller. I tried to bind the Table.Controller.content to the 'App.incidient.content' and Ember didnt even throw an exception or something
I hope you can help. I dont think that these question are really difficult to answer but for a noobie like me they are quite fundamental.
Greeting and thank you
Alex

Don't want to use any tag(including the default div tag) in Ember.Collection View

Title may sound stupid, consider the following code
My Handlebars File
<table id="main-table">
<tr>
<td>
<h1>Some Text</h1>
</td>
{{#collection myCollectionView}}
<td>
<table>
<tr><td>{{view.someProperty}}</td></tr>
</table>
</td>
{{/collection}}
</tr>
</table>
My View File
myCollectionView = Ember.CollectionView.extend({
contentBinding: "myController.someArray",
//someArray has say 4 elements
itemViewClass: Ember.View.extend()
})
I want it to render the 4 tables inside the #main-table, it instead renders them outside the #main-table because it encloses my itemViewClass inside the default div tag. I can only change the tagName property but can't set it to nil I guess, any hack for this issue?
The JSFiddle
In response to the first answer
The problem with {{each}} is that, I am using an EditableField as follows:
(just to sound clear, editable field is the one which changes a div to textfield on double click & back to div tag on focus out, simple widget built using ember)
updated Handlebars file
<table id="main-table">
<tr>
<td>
<h1>Some Text</h1>
</td>
{{#collection myCollectionView}}
<td>
<table>
<tr><td>{{view.myEditableField valueBinding="view.content"}}</td></tr>
</table>
</td>
{{/collection}}
</tr>
</table>
updated view file
myCollectionView = Ember.CollectionView.extend({
contentBinding: "myController.someArray",
//someArray has say 4 elements
itemViewClass: Ember.View.extend({
alertFunc: function(){
alert("content did change");
}.observes('content')
})
})
I want an observer to fire whenever the value in one of the editableField is changed, so that I can update my records in database. Can we accomplish this thing using {{each}} helper? also, arrayContentDidChange will only fire if the array length changes
It is possible to do this in a Ember View
App.MyView = Ember.View.extend({
tagName: ''
});
AFAIK, there can't be Ember.View without "real presence" in the DOM, but you can use the {{each}} helper if you don't want to add a view that acts as a container (here a Ember.CollectionView).
Set tagName to null does not work, see Ember.View source code.
Template:
<script type="text/x-handlebars">
<table id="main-table">
<tr>
<td>
<h1>Some Text</h1>
</td>
{{#each App.content}}
<td>
<table><tr><td>{{name}}</td></tr></table>
</td>
{{/each}}
</tr>
</table>
</script>​
Code:
App = Ember.Application.create();
App.content = [{name: "foo"}, {name: "bar"}, {name: "baz"}];
​
See this JSFiddle.

ember.js contentIndex for each helper

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?