Ember.js dynamic link - ember.js

I need some information about the {{link-to}} on ember. I've made some test and there is something I really don't understand..
Example :
I have a blog with with different post like that :
App.Router.map(function() {
this.resource('login', { path: '/' });
this.resource('home');
this.resource('posts', function(){
this.resource('post', { path: '/:post_id' }, function(){
this.route('update');
});
this.route('create');
});
});
Let's say that I have this template :
<script type="text/x-handlebars" data-template-name="enquiries">
<table>
<thead>
<tr>
<th>id</th>
<th>type</th>
<th>name</th>
<th>last update</th>
<th>Detail</th>
</tr>
</thead>
<tbody>
{{#each post in model}}
<tr>
<td>{{post.id}}</td>
<td>{{post.type}}</td>
<td>{{post.name}}</td>
<td>{{post.updatedAt}}</td>
<td>{{#link-to 'post' post}}View{{/link-to}}</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
My simple post template
<script type="text/x-handlebars" data-template-name="post">
<div class="post-info">
<button {{action "update"}}>Update</button>
<table>
<tr>
<td>{{title}}</td>
</tr>
<tr>
<td>{{content}}</td>
</tr>
<tr>
<td>{{author}}</td>
</tr>
</table>
</div>
</script>
Those link a dynamic one and there is on all of them the good url such as localhost/posts/1 or 2 etc...
When I click on the link, nothing happend. I have to had {{oulet}} to show it. but my problem is that its show on the same page as my table (underneath), but I wanted to only display the post template..
I have some trouble to understand why, and also what is the main purpose of the outlet in my case...
Thanks.

The reason the post is shown within the posts template is because your Router defines it that way. If you want a separate page, try this:
App.Router.map(function() {
this.resource('login', { path: '/' });
this.resource('home');
this.resource('posts');
this.resource('post', { path: 'posts/:post_id' }, function(){
this.route('update');
});
this.route('create');
});
When you have a nested resource, the {{outlet}} helper designates where the nested template will be rendered.

Related

ember link-to from the component

i am new at EmberJs.
I tried to link from the component "invoices-list" to invoice.
invoices-list.hbs
{{#each invoices as |invoice|}}
<tr>
<td>{{invoice.kdnr}}</td>
<td>{{invoice.rnr}}</td>
<td>{{invoice.invoiceId}}</td>
<td>**{{#link-to 'invoice' invoice.invoiceId}}Click here{{/link-to}}**</td>
</tr>
{{else}}
<p>No datas</p>
{{/each}}
invoices.hbs
{{invoices-list invoices=model}}
router.js
Router.map(function() {
this.route('invoices');
this.route('invoice', { path: '/invoice/:invoice_id' });
});
My problem is, the template will not rendered and i get the error: "props.parentView.appendChild is not a function"
What is wrong?
Thanks for help.
Fabian
Let me give you first an example how to use Link-to
Suppose this is your Route.js
Router.map(function() {
this.route('photos', function(){
this.route('edit', { path: '/:photo_id' });
});
});
and this is app/templates/photos.hbs
<ul>
{{#each photos as |photo|}}
<li>{{#link-to "photos.edit" photo}}{{photo.title}}{{/link-to}}</li>
{{/each}}
</ul>
then rendered HTML would be
<ul>
<li>Happy Kittens</li>
<li>Puppy Running</li>
<li>Mountain Landscape</li>
</ul>
so in your case this is Route
Router.map(function() {
this.route('invoices');
this.route('invoice', { path: '/invoice/:invoice_id' });
});
then you may use this
{{#each invoices as |invoice|}}
<tr>
<td>{{invoice.kdnr}}</td>
<td>{{invoice.rnr}}</td>
<td>{{#link-to 'invoice' invoice}}{{/link-to}}</td>
</tr>
{{else}}
<p>No datas</p>
{{/each}}
another example to clarify:
//Route.js
this.route('contacts');
this.route('contact', { path: 'contacts/:contact_id' });
//Contacts.hbs
{{#each model as |contact|}}
<tr>
<td>{{link-to contact.name 'contact' contact}}</td>
<td>{{link-to contact.email 'contact' contact}}</td>
<td>{{contact.country}}</td>
</tr>
{{/each}}
Hope it works for you. more info.

Link-to the previous nested resource in ember

Router.map(function() {
this.resource('users', { path: '/stores/'+store_id+'/users' });
this.route('user', { path: '/stores/'+store_id+'/users/:user_id'}, function() {
this.resource('devices', { path: '/devices' });
});
});
On devices page I want to go back to /users/:user_id.
Here is my template/devices.hbs
<table>
<tr>
<th>model</th>
<th>user_id</th>
</tr>
{{#each model as |device|}}
<tr>
<td>{{device.model}}</td>
<td>{{#link-to "???" ?? ???}}{{device.user_id}}{{/link-to}}</td>
</tr>
{{/each}}
</table>
I don't how to go back to the specific resource.
Use user.index, because it's fully qualified route name with URL: /users/:user_id.
{{#link-to 'user.index'}}Go back to /users/:user_id{{/link-to}}
<table>
<tr>
<th>model</th>
<th>user_id</th>
</tr>
{{#each model as |device|}}
<tr>
<td>{{device.model}}</td>
<td>{{#link-to "???" ?? ???}}{{device.user_id}}{{/link-to}}</td>
</tr>
{{/each}}
</table>
Thanks to #daniel-kmak for the tips. The route is fully qualified at user.index
<table>
<tr>
<th>model</th>
<th>user_id</th>
</tr>
{{#each model as |device|}}
<tr>
<td>{{device.model}}</td>
<td>{{#link-to 'user.index'}}{{device.user_id}}{{/link-to}}</td>
</tr>
{{/each}}
</table>

Re-execute model hook and rerender in Ember js

I have in my Ember App, a route displaying a list of offers;
the model is loaded by jquery ajax (I don't use Ember-data):
Ember.$.ajax({
type: 'GET',
url: App.restAPIpath + '/offers/',
headers: {
"tokens": localStorage.tokens
},
async: false
}).then(function(res) {
data = res.offers;
});
return data;
The offers are shown in the template using a datatable and in each row there's a delete button that sends an ajax delete request to the server and correctly deletes the right offer:
{{#view App.dataTableView}}
<thead>
<tr>
<th>Created</th>
<th>Name</th>
<th>Deadline</th>
<th>Duration</th>
<th>Delete?</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Created</th>
<th>Name</th>
<th>Deadline</th>
<th>Duration</th>
<th>Delete?</th>
</tr>
</tfoot>
<tbody>
{{#each offer in model}}
<tr>
<td>
{{offer.createdAt}}
</td>
<td>
{{#link-to 'eng.offers.edit' offer}}{{offer.name}}{{/link-to}}
</td>
<td>
{{offer.deadline}}
</td>
<td>
{{offer.optionDuration}}
</td>
<td>
<button class="form-button-red" {{action "deleteOffer" offer}}>Delete</button>
</td>
</tr>
{{/each}}
</tbody>
{{/view}}
but then I need to update the model (and refresh the view?) because if not the deleted offer is still shown until you refresh the page...
I'd recommend switching your ajax to async, you'll block the router from doing other important things. You should be able to accomplish the same results doing this:
return Ember.$.ajax({
type: 'GET',
url: App.restAPIpath + '/offers/',
headers: {
"tokens": localStorage.tokens
},
}).then(function(res) {
return res.offers;
});
Then I'd do something like this for your delete (I'm going to guess a bit of your code) in your controller's delete action:
actions:{
delete: function(item){
var self = this;
Ember.$.ajax({
type: 'DELETE',
url: App.restAPIpath + '/delete/' + item.get('id'),
headers: {
"tokens": localStorage.tokens
},
}).then(function(){
//manually remove the item from your collection
self.removeObject(item);
});
}
}
BTW I think delete is a reserved key word and jslint and some minimizers are total haters, so you might do something like deleteItem

template rendering is not working properly in ember js

I am very new to Ember js. when i route one template to another it working properly.but the problem is when i was render same template it won't work.
My code is follows:
index.html:Manager template in index.html
<script type="text/x-handlebars" data-template-name="manager">
{{#each model.manager}}
<div class="pure-g-r content-ribbon">
<div class="pure-u-1-3">
<div class="img-viewer-profile">
<img {{bindAttr src="image"}}>
</div>
</div>
<div class="pure-u-2-3">
<div class="l-box">
<h4 class="content-subhead">{{name}}</h4>
<table class="pure-table">
<tbody>
<tr class="pure-table-odd">
<td>Id</td>
<td><b>ATL-{{id}}</b></td>
</tr>
<tr class="pure-table-odd">
<td>Team</td>
<td><b>{{team}}</b></td>
</tr>
<tr>
<td>Division</td>
<td><b>{{division}}</b></br>
</tr>
<tr class="pure-table-odd">
<td>Manager</td>
<td>
<b>
<a href="#" {{action "managerinfo" manager_id}}>
{{manager_name}}
</a>
</b>
</td>
</tr>
{{/each}}
<tr>
<td>Reportees</td>
<td>
{{#each model.results}}
<br><b>
<a href="#" {{action "profileinfo" id}}>
{{reportees}}
</a>
</b></br>
{{/each}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
{{outlet}}
</script>
app.js:
=========
App.ManagerController = Ember.ObjectController.extend({
manager_id: '',
id: '',
actions:{
managerinfo: function(manager_id) {
// the manager id of selected manager field
var manager_id = manager_id;
alert("profile");
alert(manager_id);
managerdata = $.ajax({
dataType: "json",
url: "/manager?manager_id=" + manager_id,
async: false}).responseJSON
managerdata.manger_id = manager_id;
console.log(managerdata);
this.transitionToRoute('manager', managerdata);
}
)}
Now my problem is when render the new manager data to manager it wont be displayed.
After refresh only it shows the data.
what mistake i was done in this code , i dont understand.so please provide me solution.
i added my complete code here with proper tags order.
As per your comment, the way you are doing is not suggested. You can pass manager_id in the route url. I will give you very basic skeleton which you can make further changes. Do remember, if you want to set model data from ajax, use model hook in the route
First Router
App.Router.map(function() {
this.resource("managers", function(){
this.route("all");
this.route("manager", { path: "/:manager_id" });
});
});
So here with #/manager/all displays all managers list
#/manager/:manager_id displays manager with id manager_id
Next ManagerAll route
App.ManagersAllRoute = Ember.Route.extend({
model: function() {
//do ajax and return managers data which sets as model for this route
}
});
sameway
App.ManagersManagerRoute = Ember.Route.extend({
model: function(params) {
//do ajax and return managers data which sets as model for this route
//here params will have the manager_id passed through url
//as it is ajax, create a promise
return new Ember.RSVP.Promise(function(resolve, reject) {
Ember.$.ajax({
dataType: "json",
url: "/manager?manager_id=" + params.manager_id,
async: false}).then(function(data){
resolve(data);
})
});
}
});
Next is template for managers
{{#each model.manager}}
{{#link-to 'managers.manager' manager_id}}{{{manager_name}}{{/link-to}}
{{/each}}
Now a template for manager
{{manager_id}}
{{manager_name}} blah blah blah
You didn't close the each tag properly.
<script type="text/x-handlebars" data-template-name="manager">
{{#each model.manager}}
<a href="#" {{action "managerinfo" manager_id}}>
{{manager_name}}
</a>
{{/each}}
</script>
Also you haven't closed the ManagerController correctly in the given above. Double check that.
App.ManagerController = Ember.ObjectController.extend({
manager_id: '',
id: '',
actions:{
managerinfo: function(manager_id) {
// the manager id of selected manager field
var self=this;
var manager_id = manager_id;
alert("profile");
alert(manager_id);
managerdata = $.ajax({
dataType: "json",
url: "/manager?manager_id=" + self.manager_id,
async: false}).responseJSON.then(function(managerdata) {
managerdata.manger_id = self.manager_id;
console.log(managerdata);
this.transitionToRoute('manager', managerdata);
})
}
)}

How to use sortProperties: ['lastName']

I'd like to sort an Array or users which gets fetched by ember-data. I can't figure out to sort the array be lastName. The following code doesn't do the job. How can I fix it?
app.js
App.UsersRoute = Ember.Route.extend({
model: function() {
return App.User.find();
}
});
App.UsersController = Ember.ArrayController.extend({
sortProperties: ['lastName'],
sortAscending: true
})
index.html
<script type="text/x-handlebars" data-template-name="users">
<table class='table table-striped'>
{{#each model itemController="user"}}
<tr>
<td>{{lastName}}</td>
</tr>
{{/each}}
</table>
</script>
Kudos to Bradley Priest for answering the question. Using this in the template does the trick.
index.html
<script type="text/x-handlebars" data-template-name="users">
<table class='table table-striped'>
{{#each this itemController="user"}}
<tr>
<td>{{lastName}}</td>
</tr>
{{/each}}
</table>
</script>