Iam having a table using bootstrap components with each row clickable
am also using handlebars inside table rows
<tbody data-link="row" class="rowlink">
{{#each model.pastreqlist}}
{{#if_eq {{status}} "PENDING"}}
<tr data-toggle="modal" data-target="#pastreq {{action "selectRow" this target="view"}}">
{{else}}
<tr>
{{/if_eq}}
<td>{{employee_name}}</td>
<td>{{type_id}}</td>
<td>{{from_date}}</td>
</tr>
{{/each}}
</tbody>
i want to enable the content inside tr i.e i want to pop up modal for only those rows which is having status as "PENDING"
so far i have tried this but its not working
here's my helper code also
Handlebars.registerHelper('if_eq', function(a, b, opts) {
if(a == b)
return opts.fn(this);
else
return opts.inverse(this);
});
here is my controller code
App.LinksController = Ember.ObjectController.extend({
actions: {
myleavesinfolist: function () {
rdata = $.ajax({
type: "POST",
url: "/myleaves",
dataType: "json",
async: false
}).responseJSON;
this.transitionToRoute("myleaves", rdata);
} //myleavesinfolist
} //actions
}); //controller
please help am a newbie to handlebars and ember js
i used handlebars registerhelper in my script as below
Ember.Handlebars.registerHelper('ifeq', function(a, b, options) {
return Ember.Handlebars.bind.call(options.contexts[0], a, options, true, function(result) {
return result === b;
});
});
and in my template i have done like this
{{#each model.pastreqlist}}
{{#ifeq status "PENDING"}}
<tr data-toggle="modal" data-target="#pastrequestsmodal" {{action "selectRow" this target="view"}} style="cursor: pointer">
{{else}}
<tr>
{{/ifeq}}
You should set up a computer property on your model, like this:
App.Request = Ember.Model.extend({
stats:DS.attr('string'),
isPending:function(){
if(this.get('status') === 'PENDING'){
return true;
}
}.property('status')
});
Then in your template, you can do it like this:
<tbody data-link="row" class="rowlink">
{{#each model.pastreqlist}}
{{#if isPending}}
<tr data-toggle="modal" data-target="#pastreq" {{action "selectRow" this target="view"}}>
{{else}}
<tr>
{{/if}}
<td>{{employee_name}}</td>
<td>{{type_id}}</td>
<td>{{from_date}}</td>
</tr>
{{/each}}
</tbody>
Related
I have a toggleProperty in the container to toggle a set of actions on each item. The problem is, when the toggle button on 1 item is clicked, every item is toggled, instead of the one that's clicked.
I would love to know how to toggle only the clicked item, not everything from the list.
I am using the ember-cli to build my application.
My category model:
import DS from 'ember-data';
export default DS.Model.extend({
pk: DS.attr('string'),
category: DS.attr('string'),
products: DS.hasMany('product'),
});
My category route:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.findAll('category');
},
});
My category controller
expand: function() {
this.toggleProperty('isExpanded', true);
}
My template:
{{#each model as |i|}}
<tr>
<td>
<a {{action 'expand'}}>{{i.category}}</a>
</td>
<td>
{{i.pk}}
</td>
<td>
{{#if isExpanded}}
<button {{action "deleteCategory"}}>Edit</button>
<button {{action "deleteCategory"}}>Delete</button>
{{else}}
<button {{action 'expand'}}>Actions</button>
{{/if}}
</td>
</tr>
{{/each}}
Since stackoverflow, is not letting me post without adding more text, I would also like to know how to show all the products associated with the category, on the same route (same page), by clicking on each category?
Cheers and thank you.
In controller:
expand(item) {
if (!item) {
return;
}
item.toggleProperty('isExpanded', true);
}
Template:
{{#each model as |i|}}
<tr>
<td>
<a {{action 'expand' i}}>{{i.category}}</a>
</td>
<td>
{{i.pk}}
</td>
<td>
{{#if i.isExpanded}}
<button {{action "deleteCategory"}}>Edit</button>
<button {{action "deleteCategory"}}>Delete</button>
Products:
{{#each i.products as |product|}}
{{product}}
{{/each}}
{{else}}
<button {{action 'expand' i}}>Actions</button>
{{/if}}
</td>
</tr>
{{/each}}
I have a small app, written using ember.js, that talks to REST API using RESTAdapter and displaying elements in list using ArrayController. When I'm performing a POST request to server and the responds with code 201 (Created) and a model with id the new models is displayed in list. But if server returns code 409 (Conflict) with the payload that looks like this
{
'errors': ['Error description']
}
I expect that model will not be added to list, but it isn't so. The model is still added to list, but without ID.
I found out that this model can be removed in multiple ways, but I don't know which of them is right.
So the questions are:
What is the right way to handle errors in this case (when you are using ArrayController and RESTAdapter)?
Is it possible to prevent model showing up in list if server returns 4xx code?
Here is code that I use now:
App.Usergroup = DS.Model.extend({
name: DS.attr('string'),
description: DS.attr('string'),
});
App.UsergroupsListController = Ember.ArrayController.extend({
needs: ['usergroups'],
allUsergroups: Ember.computed.alias('controllers.usergroups'),
itemController: 'usergroup'
});
App.UsergroupController = Ember.ObjectController.extend({
actions: {
removeGroup: function() {
var group = this.get('model');
group.deleteRecord();
group.save();
}
}
});
App.UsergroupsController = Ember.ArrayController.extend({
actions: {
addUsergroup: function() {
var model = this.get('model');
var group = this.store.createRecord('usergroup', {
name: model.name,
description: model.description
});
group.save().then(function() {
},
function(error){
group.rollback();
});
this.transitionTo('usergroups.index');
}
}
});
And here is the template excerpt:
<script type="text/x-handlebars" id="usergroups">
<div class="header">
<h1>User groups list</h1>
</div>
<div class="content">
<form class="pure-form">
<fieldset>
{{input valueBinding="model.name" placeholder="Name"}}
{{input valueBinding="model.description" placeholder="Description"}}
<button type="submit" {{action 'addUsergroup'}} class="pure-button pure-button-primary">Add</button>
</fieldset>
</form>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" id="usergroups-list">
{{#if model}}
<table class="pure-table pure-table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{{#each}}
<tr>
<td>{{id}}</td>
<td>{{name}}</td>
<td>{{description}}</td>
<td><button class="pure-button" {{action "removeGroup"}}><i class="fa fa-trash"></i> Remove</button></td>
</tr>
{{/each}}
</tbody>
</table>
{{else}}
<p>No user groups.</p>
{{/if}}
</script>
Ember provides an error route and a loading route
Read more about it here - Ember error route
So when the Usergroup model throws an error, Ember will look for UsergroupErrorRoute or
usergroup/error template.
What you can do is you can have
<script type="text/x-handlebars" data-template-name="usergroup/error">
{{message}}
<script>
where {{message}} is transferred from the route
So, as I found out, errors should be handled in Route.
Currently my route looks like this:
App.UsergroupsRoute = App.AuthenticatedRoute.extend({
model: function() {
return this.store.find('usergroup');
},
redirectToLogin: function(transition) {
var loginController = this.controllerFor('login');
loginController.set('attemptedTransition', transition);
this.transitionTo('login');
},
actions: {
error: function(reason, transition) {
if (reason.status == 401) {
this.redirectToLogin(transition);
}
else {
alert('Something went wrong');
}
}
}
});
It works just fine and does what it should. But now I cannot get what is a reason for placing errors handling in Route?
I'm creating a real time app in Ember.
Every time I receive an update I do the following:
record = serializer.extractSingle(store, type, data);
store.update(socketModel, record);
The update is an drawnNumbers array.
This happens in my view;
{{#each bingoCard in ownBingoCards}}
<div class="col-sm-4">
<div class="table-responsive">
<span class="label label-primary">Card {{bingoCard.id}}</span>
<table class="table table-bordered table-card">
<tbody>
{{#each row in bingoCard.squares}}
<tr>
{{#each number in row itemController='number'}}
{{#if number}}
<td {{bind-attr class='isActive:active'}}>{{number.model}}</td>
{{else}}
<td>X</td>
{{/if}}
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
{{/each}}
ownBingoCards is a computed property
ownBingoCards: function () {
var gameId, userId;
gameId = this.get('id');
userId = this.get('session.content.id');
return this.get('store').filter('bingoCard', function (bingoCard) {
return (bingoCard.get('game.id') === gameId && bingoCard.get('user.id') === userId);
});
}.property('model.bingoCards', 'session.content'),
So everytime a number gets added to the drawnNumbers array it's setting that td to active.
The only problem is, my whole view rerenders make it very laggy. But as soon as I refresh my browser it stops rerendering the whole view and just marking the numbers active. Why does this happen? Why is this refresh needed?
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);
})
}
)}
I had a single view with an each helper similar to this:
<table class="select-sect" cellspacing="0">
{{#each sections}}
<tr {{bindAttr class="highlight:highlight"}} {{action "selectSection" }}>
<td class="key">
{{#each zones}}
<em {{bindAttr style="color"}}> </em>
{{/each}}
</td>
<td class="sect">{{name}}</td>
<td class="price">{{currency lowPrice}} - {{currency highPrice}}</td>
</tr>
{{/each}}
</table>
Binding a dynamic class like this worked very well. If I set section.highlight == true in a controller, the view would update with the appropriate class.
"Calling" code:
zone.section.set('highlight', true);
Because I need to handle some other events on each row, I've migrated the entire table row to a nested view. I'm searching for a way to make the dynamic class work as it used to.
{{#each sections}}
{{#view SYOS.SelectSectionRowView sectionBinding="this" }}
<td class="key">
{{#each section.zones}}
<em {{bindAttr style="color"}}> </em>
{{/each}}
</td>
<td class="sect">{{section.name}}</td>
<td class="price">{{currency section.lowPrice}} - {{currency section.highPrice}}</td>
{{/view}}
{{/each}}
I don't think I can use the same bindAttr solution since it would need to apply to the #view helper. I've also tried classNameBindings & classBinding to no avail. Updating section.highlight no longer triggers this view to apply the dynamic class.
View w/ classNameBindings:
SYOS.SelectSectionRowView = Em.View.extend({
tagName: 'tr',
classNameBindings: ['isHighlighted:highlight'],
isHighlighted: function () {
return this.section.highlight;
} //also tried .property('section')
});
View with classBinding:
{{#view SYOS.SelectSectionRowView sectionBinding="this" classBinding="needsHighlight"}}
in view class:
needsHighlight: function () {
if (this.section.highlight) {
return 'highlight';
}
return '';
} .property('section'),
Neither of these seems to do the trick. Can anyone lend any insight into how to get a scenario like this going?
Thanks much!
try classNameBindings: ['section.highlight:highlight']