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
Related
I picked up learning emberJS lately and I have had issues doing some basic things I would have done while not using this framework. The main issues I have had was using jquery plugins, in this case jquery datatables
in my component's component.js
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement: function(model){
Ember.run.scheduleOnce('afterRender', this, function(model) {
this.$(".datatables").DataTable();
});
}
});
in my component's template.hbs
<table class="table table-hover datatables">
<thead>
<tr>
<th>Course Name</th>
<th>Course Title</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
{{#each courses as |course|}}
<tr>
<td> {{ course.name }} </td>
<td> {{ course.title }} </td>
<td class="text-center"> {{#link-to 'courses.edit' course }} Edit {{/link-to}} </td>
</tr>
{{/each}}
</tbody>
</table>
**then i used the component like :- **
{{#course-datatable courses=model}}{{/course-datatable}}
I would appreciate a demo accompanied with answers.
cheers
Ok so i haven't done a component of the jquery datatable plugin. But yes for other Jquery plugins, it would be more or less like this. If you are building your own component:
Add the Datatable js files to include inside your BrocFile
Run in ember client
ember g my-jquery-datatable
this will generate the component in the generated hbs fill in the general html you would use
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
{{#each modelWithData}}
<tr>
<td>this.name</td>
<td>this.position</td>
</tr>
{{/each}}
</table>
then on you js generated file initiate the plugin in the didInsertElementMethod
export default Ember.Component.extend({
didInsertElement(){
this.$('#example').DataTable();
}
});
then to be able to use this table in other components or controllers you can do
{{my-jquery-datatable modelWithData=otherArrayWithTheTableAttributes}}
Hope it helps
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/
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>
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..
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.