Ember template does not remove when transition to different route - ember.js

I feel as if this is a very simple problem to fix I am just not aware of how to fix it. Currently I have an outlet that displays a template like this:
user.hbs:
<div id="user-profile">
<img {{bind-attr src="avatarURL"}} alt="User's Avatar" class="profilePic"/>
<h2>{{name}}</h2>
<span>{{email}}</span>
<p>{{bio}}</p>
<span>Created {{creationDate}}</span>
<button {{action "edit"}}>Edit</button>
{{outlet}}
</div>
The template to be rendered at the outlet is this:
user_edit.hbs:
<div id="user-edit">
<h3>Edit User</h3>
<div class="panel-body">
<div class="row">
<label class="edit-user-label">Choose user avatar</label>
{{input class="form-control" value=avatarUrl}}
</div>
<div class="row">
<label>User name</label>
{{input class="form-control" value=name}}
</div>
<div class="row">
<label class="edit-user-label">User email</label>
{{input class="form-control" value=email}}
</div>
<div class="row">
<label class="edit-user-label">User short bio</label>
{{textarea class="text-control" value=bio}}
<div>
<div class="row">
<button {{action "save"}}>SAVE</button>
<button {{action "cancel"}}>CANCEL</button>
</div>
</div>
</div>
When I first visit the user route, the outlet does not display because the button has not been clicked. The button is hooked to a controller which takes care of the action. The action just transitions to the route where the template is displayed at the outlet. It appears just as expected but when I click on a different user model, the outlet from the previous user is still there without everything in the <div class="panel-body"> </div>. So Ember hides the panel-body div on transition but not the user-edit div. If you need more information I will be happy to provide it.
Here are the controllers:
userController:
App.UserController = Ember.ObjectController.extend({
actions: {
edit: function() {
this.transitionToRoute('user.edit');
}
}
});
Here is the userEditController:
App.UserEditController = Ember.ObjectController.extend({
actions: {
save: function() {
var user = this.get('model');
user.save();
this.transitionToRoute('user', user);
},
cancel: function() {
var user = this.get('model');
this.transitionToRoute('user', user);
}
}
})

Hi why dont you use {{#link-to 'edit' model}} instead of action ???
you can pass model to link-to so you dont have to get model in controller and then transitionToRoute
Look at this

Related

Delete a record in Ember data not working

I have a table (a component) and a delete button in each row. When the the delete button is clicked the specific row should be deleted.
Tried the following code:
MyComponent.js
import Ember from 'ember';
export default Ember.Component.extend({
actions:{
deleteCartRecord(cartDetails){
debugger;
this.sendAction('deleteRecord',cartDetails);
}
}
});
In MyComponent.hbs
{{#each model.orderParts as |newCart|}}
<div class="card-wrapper col-lg-12 col-md-12">
<div class="col-lg-2 col-md-2">
<div class="order-id">{{newCart.partNumber}}</div>
{{#if (gte newCart.promiseQty newCart.quantity)}}
<div class="order-status delivered">{{env.APP.StockAvailable}}</div>
{{else}} {{#if (gt newCart.promiseQty '0'(and (lt newCart.promiseQty newCart.quantity)))}}
<div class="order-status intransit">{{env.APP.LowInStock}}</div>
{{else}} {{#if (eq newCart.promiseQty '0')}}
<div class="order-status outofstock">{{env.APP.OutofStock}}</div>
{{/if}} {{/if}} {{/if}}
</div>
<div class="col-lg-3 col-md-3">
<div class="item-header">Delivery Date</div>
<div class="item-data">{{newCart.deliveryDate}}</div>
</div>
<div class="col-lg-2 col-md-2">
<div class="item-header">Required Qty.</div>
<div class="item-data">
{{increse-required-quantity incresedQuantity=newCart.quantity}}
</div>
</div>
<div class="col-lg-2 col-md-2">
<div class="item-header">Unit Price</div>
<div class="item-data">{{newCart.unitPrice}}</div>
</div>
<div class="col-lg-2 col-md-2">
<div class="item-header">Total Price</div>
<div class="item-data">{{newCart.partTotalPrice}}</div>
</div>
<div class="col-lg-1 col-md-1 button-colum"><button type="button" class="btn btn-danger" {{action "deleteCartRecord" newCart}}>Delete</button> </div>
</div>
{{/each}}
My Controller
import Ember from 'ember';
export default Ember.Controller.extend({
actions:{
deleteRecord(data){
debugger;
let confirmation = confirm("are you sure to delete");
if(confirmation)
{
debugger;
data.deleteRecord();
data.save();
}
}
}
});
The template file in which component is called
<hr>
</div>
<div class="col-lg-12 col-md-12">
<div class="checkout-summery-wrapper">
<div class="total-label">Total</div>
<div class="total">{{model.totalPrice}}</div>
<!--<div class="tax-text">( Inclusive of all taxes )</div>-->
<div class="place-order-button"><button type="button" class="btn siemens-btn">Place Order</button></div>
</div>
</div>
<div class="col-lg-12 col-md-12">
{{#if model.orderParts.isGeneric}}
<div class="panel panel-default card-list-panel">
<div class="panel-heading-cart col-lg-12 col-md-12">
<div class="col-lg-11 col-md-11 heading">Generic Parts</div>
<div class="col-lg-1 col-md-1">Delete All</div>
</div>
<div class="panel-body">
{{cart-record model = model}}
</div>
</div>
{{/if}}
{{#unless model.orderParts.isGeneric}}
<div class="panel panel-default card-list-panel">
<div class="panel-heading-cart col-lg-12 col-md-12">
<div class="col-lg-11 col-md-11 heading">Hot Gas Path</div>
<div class="col-lg-1 col-md-1">Delete All</div>
</div>
<div class="panel-body">
{{cart-record model = model deleteRecord=(action 'deleteRecord')}}
</div>
</div>
{{/unless}}
</div>
MyRoute
import Ember from 'ember';
export default Ember.Route.extend({
model: function()
{
return this.get('store').queryRecord('cart',{userId:1})
}
});
My Serializer
import DS from 'ember-data';
export default DS.JSONSerializer.extend(DS.EmbeddedRecordsMixin, {
primaryKey: 'totalPrice',
attrs: {
orderParts:
{
serialize: 'records',
deserialize: 'records'
}
}
});
I have the following issues:
In MyComponent.hbs, will newCart being passed as a parameter delete all the records or the specific record I want deleted?
Any ideas on why MyController is not invoked from the component?
Is this the correct way of deleting a record in ember?
Thank you in advance.
In MyComponent.hbs newCart is passed as a parameter will this delete all the record or the specific record i want?
It will delete the particular record alone. if you want to delete all the record then you can try unloadAll('model-name')
MyController is not invoked from the component why is that?
You need to send action upcon calling component, {{my-component deleteRecord=(action 'deleteRecords') }} . Actually real problem is, you are calling deleteRecord but in controller you got deleteRecords.
Is this the correct way of deleting a record in ember?
If you want to delete right away then you can use destroyRecord this will delete and save record immediately
Well, your example is full of bugs...
In MyComponent.hbs, will newCart being passed as a parameter delete all the records or the specific record I want deleted?
Nope.
Firstly, you need to understand that the result of store.query in your route returns a DS.ManyArray(an Array like object, which is model in your example) contains group of DS.Model instances (which should be newCart in your example, but you must change to {{#each model as |newCart|}} first). And only this DS.Model has method .save() and .deleteRecord().
The action you set on the button is {{action "deleteCartRecord" newCart.partNumber}}, so you actually passing a property called partNumber to deleteRecord and running deleteRecord and save on this property. Unless this partNumber is a DS.belongsTo pointing to another DS.Model, or it cannot work at all.
But what you wanted is to delete newCart, right?
Any ideas on why MyController is not invoked from the component?
Your invoke is right. But since your component is full of bugs, it must be throwing exceptions somewhere else and the app cannot run already.
Is this the correct way of deleting a record in ember?
I think I answered enough in the first question.

Loading data that isnt on the route?

I have a dropdown setup on a form but how do i set it up if my data isnt in the route? I am trying to load in a list of territories on a new dealer form. I have added ember-power-select add on but I cant figure out how to load the data to the add on to display the available options. Do I need to create a service or controller?
New to ember just trying to work through the basics.
Router.map(function() {
this.route('login');
this.route('admin', function() {
this.route('territory', function() {
this.route('new');
this.route('edit', { path: '/:territory_id/edit'});
this.route('view', { path: '/:territory_id/view'});
});
this.route('dealer', function() {
this.route('view', { path: '/:dealer_id/view'});
this.route('new');
});
});
});
This is my form I am using on creating a new item.
<div class="well">
<form class="form-horizontal">
<fieldset>
<legend>New Dealer</legend>
<div class="form-group">
<label for="inputFirstName" class="col-lg-2 control-label">Name</label>
<div class="col-lg-4">
{{input type="text" value=model.dealerName class="form-control" placeholder="Dealer Name"}}
</div>
</div>
<div class="form-group">
<label for="inputFirstName" class="col-lg-2 control-label">Territory</label>
<div class="col-lg-4">
{{#power-select selected=dealer options=dealer onchange=(action "chooseDestination") as |dealer|}}
{{dealer.dealerName}}
{{/power-select}}
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
{{#link-to 'admin.dealer' class="btn btn-default"}}Cancel{{/link-to}}
<button type="submit" class="btn btn-primary" {{action 'saveDealer' model}}>Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
Just because a route is the new action for a territory or the view action for a dealer, doesn't mean that you can't load other data there.
For example, in the territory/view route, you could load all the dealers.
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return Ember.RSVP.hash({
territory: this.store.find('territory', params.territory_id),
dealers: this.store.findAll('dealer')
})
}
});
Then in your controller and templates, you would have access to model.territory and model.dealers

On submit can't get data from checkbox selection

Hi in my apps I have a form with checkbox group, and I can't retrived selected at submit.
Here is some code
The form content from declare.handlebars:
<form class="declare">
<div class="hidden-fields" style="display:none">
{{view Ember.TextField valueBinding="declaration_type" class="form-control half" type="text"}}
</div>
<fieldset>
...
</fieldset>
<fieldset>
<div class="form-group">
<label>Type de support</label>
<p>
{{render 'publication/declaration_support_types' Sampick.supportTypes}}
</p>
</div>
...
</fieldset>
<div class="actions-bottom">
<button {{action "sendDeclaration" content}} class="button button-select"><i class="icon-download"></i> Confirm</button>
</div>
</form>
The handlebars code for the render of publication/declaration_support_types:
{#each }}
<label class="checkbox-inline">
{{input type="checkbox" name="publication_declaration_support_type" checked=isChecked}} {{ description }}
</label>
{{/each}}
Then I have the following controller for the render 'publication/declaration_support_types':
Sampick.PublicationDeclarationSupportTypesController = Ember.ArrayController.extend({
sortProperties: ['description'],
sortAscending: false,
itemController: 'publicationDeclarationSupportType',
selected: Ember.computed.filterBy('[]', 'isChecked', true),
selectedItems: Ember.computed.mapBy('selected', 'description')
});
Sampick.PublicationDeclarationSupportTypeController = Ember.ObjectController.extend({
isChecked: false,
toggle: function() {
this.toggleProperty('isChecked');
}
});
and finaly the route for the previous html
Sampick.PublicationDeclareRoute = Ember.Route.extend({
actions: {
sendDeclaration: function(content) {
var self = this;
if (content.get("prints") == 1) {
self.validateRecipient(content);
} else {
self.submitDeclaration(content);
}
}
}
});
My issue is that in my sendDeclaration action I can't get the selected checkbox from declarationSupportTypes using the selectedItems propertie define in the controller.
Thanks for your helps
Working fiddle: http://emberjs.jsbin.com/legozucega/1/
There was a typo in IndexRoute, action=>actions.

Why would a newly created record not show up in a list?

I have a form that creates a record, then transitions to the list of resources for a particular object. However once the record is created, it is not reflected in the list of resources. If I refresh the page, the record is saved in the correct place. I have the ember chrome extension installed and if I look under Resources, then the resource is there pointing to the correct Badge. But if I go to badge first, and look for resources, it is not listed. Any ideas? I would be happy to provide any more information necessary to clarify. Thank you in advance
Create Resource Form Controller and Route
Controller
App.ResourcesCreateController = Ember.ObjectController.extend({
resourceTypes: ["link","file","video"],
needs: ['badge','resourcesIndex'],
actions: {
save: function() {
//Gather the info from the form
var description = this.get('description');
var url = this.get('url');
var type = this.get('type');
var text = this.get('text');
var badge = this.get('controllers.badge').get('model');
//set the data to the model of the route (ResourceCreateRoute)
var resource = this.get('model');
console.log(resource);
resource.set('description',description);
resource.set('url',url);
resource.set('type',type);
resource.set('text',text);
resource.set('badge',badge);
var self = this;
//save the route
var a = resource.save().then(function() {
//if success
//this.get('store').reload();
console.log('%c that resource saved rather nicely','color:green;');
self.transitionToRoute('resources.index',self.badge);
}, function() {
//if failure
console.log('%c Yea boss...that didnt go so hot', 'color:red;');
self.set('isError',true);
});
},
reset: function() {
this.transitionToRoute('resources.index');
}
}
});
Route
App.ResourcesCreateRoute = Ember.Route.extend({
model: function() {
return this.store.createRecord('resource');
}
})
List Resources Route
App.ResourcesRoute = Ember.Route.extend({
model: function(){
return this.modelFor('badge').get('resources');
}
});
Models
Resource Model
App.Resource = DS.Model.extend({
'badge': DS.belongsTo('badge'),
'text': attr('string'),
'url': attr('string'),
'description': attr('string'),
'type': attr('string')
});
Badge Model
App.Badge = DS.Model.extend({
'category': DS.belongsTo('category'),
'title': attr('string'),
'type': attr('string'),
'ord': attr('number'),
'short_description': attr('string'),
'full_description': attr('string'),
'mentor': DS.belongsTo('employee'),
'parent':DS.belongsTo('badge'),
'icon': attr('string'),
'required': attr('boolean'),
'signoff_role': attr('string'),
'created_at': attr('string'),
'updated_at': attr('string'),
'resources': DS.hasMany('resource', { async: true } ),
'quiz': DS.belongsTo('quiz', { async: true } )
});
Templates
List of Resources
{{#link-to "resources.create" class="btn btn-primary btn-xs pull-right"}} Create Resource {{icon "plus"}}{{/link-to}}
<h3>Resources</h3>
<dl>
{{#each resource in controller}}
{{render resources/resource resource}}
{{else}}
<p class="lead text-muted">There are no resources</p>
{{/each}}
</dl>
Resource Item Template
{{#if isEditing}}
<div {{bindAttr class="controller.isError:alert-danger:alert-info :alert"}}>
<div class="row">
<div class="col col-lg-2">
<small>Type</small>
{{view Ember.Select contentBinding="resourceTypes" classNames="form-control" valueBinding="type"}}
</div>
<div class="col col-lg-10">
<small>Resource Name</small>
{{input valueBinding="text" class="form-control"}}
</div>
</div>
<div class="row">
<div class="col col-lg-12">
<br>
<small>Description</small>
{{textarea valueBinding="description" rows="5" class="form-control"}}
</div>
</div>
<div class="row">
<div class="col col-lg-12">
<br>
<small>URL,File Name, or Vimeo ID</small>
{{input valueBinding="url" class="form-control"}}
</div>
</div>
<hr>
<div class="btn-group">
<div {{action "save"}} class="btn btn-primary">{{icon "floppy-save"}} Save</div>
{{#if confirmDelete}}
<div {{action "delete"}} class="btn btn-danger">{{icon "trash"}} Are You sure?</div>
{{else}}
<div {{action "confirm"}} class="btn btn-danger">{{icon "trash"}} Delete</div>
{{/if}}
</div>
<div {{action "reset"}} class="btn btn-default"> {{icon "ban-circle"}} Cancel</div>
</div>
{{else}}
<div class="btn-group pull-right btn-group-xs">
{{#if view.hover }}
<div {{action "edit"}} class="btn btn-default">{{icon "cog"}}</div>
{{/if}}
</div>
<dt>
<span class="text-muted">{{resource_icon type}}</span> {{text}}
</dt>
{{#if description}}
<dd class="text-muted" style="margin-bottom:1em">
{{markdown description}}
</dd>
{{/if}}
<hr>
{{/if}}
Create Resource Template
<h3>Create Resource</h3>
<div class="row">
<div class="col col-lg-2">
<small>Type</small>
{{view Ember.Select contentBinding="resourceTypes" classNames="form-control" valueBinding="type"}}
</div>
<div class="col col-lg-10">
<small>Resource Name</small>
{{input valueBinding="text" class="form-control"}}
</div>
</div>
<div class="row">
<div class="col col-lg-12">
<br>
<small>Description</small>
{{textarea valueBinding="description" rows="5" class="form-control"}}
</div>
</div>
<div class="row">
<div class="col col-lg-12">
<br>
<small>URL,File Name, or Vimeo ID</small>
{{input valueBinding="url" class="form-control"}}
</div>
</div>
<hr>
<div {{action "save"}} class="btn btn-primary">{{icon "floppy-save"}} Save</div>
<div {{action "test"}} class="btn btn">Test</div>
{{#link-to "resources.index" class="btn btn-default" }} {{icon "ban-circle"}} Cancel {{/link-to}}
<br><br>
</div>
Just some general notes first.
With this much code, everyone's going to have a much easier time helping you if you provide a JSBin or something. It's a bit of extra work for you, but you're asking for help, and this is a lot to just mentally parse and run. Personally, it was some extra overhead for me because you didn't include your router, so I had to do a pass just to try to figure out how badge and resource were related.
When you're using an ObjectController with the route model set to a new record, with input helpers, you shouldn't need to do all of that setting. That's why you specified those value bindings on the helpers. But when you do need to set a bunch of properties, you can just do that all at once with something like record.setProperties({prop1: prop1Value, prop2: prop2Value ...}); and save yourself a lot of typing.
I don't understand why you're using resourcesIndex as a ResourcesCreateController need. To actually answer your question, it might work to specify just 'resources' as a need
then use something like
resource.save().then(function(record){
self.get("controllers.resources").pushObject(record);
self.transitionToRoute("resources.index", badge); // I don't know if this makes any sense because you didn't show your router, but at the very least, don't use self.badge, or even self.get("badge"), because badge is already accessible in this scope.
}
It'd be nice to see your Model definitions, and even better if you had a jsbin setup showing the problem.
You could always try hooking it up on createRecord.
App.ResourcesCreateRoute = Ember.Route.extend({
model: function() {
return this.store.createRecord('resource', {badge: this.modelFor('badge')});
}
})
It seems like when you create the new resource, you aren't putting it in the store. You should try something like this.store.createRecord(resource) then instead of your resource.save, do a this.store.commit.
I'm not entirely sure I'm right. But it may be a possibility.
Fixed. I am not sure if this is the correct way to handle this but basically the parent model needed to be reloaded once the child model was created and saved. So like this
save: function() {
var self = this;
var resource = this.store.createRecord('resource',{
property: 'property',
relatedProperty: this.get('model'),
//etc
});
resource.save().then(function(){
self.get('model').reload();
},function(){
//do stuff because the resource didnt save
});
}

bindAttr reverse boolean

In my view I have a button which I want to be disabled when the data of the model is not dirty.
When I output: <button {{ action "update" }} {{bindAttr disabled="isDirty"}}>Save</button> it is enabled when the data is not dirty, and disabled when the data is dirty.
I want to reverse that so I tried this: <button {{ action "update" }} {{bindAttr disabled="!isDirty"}}>Save</button> but now is doesn't check the dirtyness at all. How do I reverse the boolean within a bindAttr helper?
Here is my code:
Controller
App.SiteController = Em.ObjectController.extend({
isNotDirty: function() {
return !this.get('isDirty');
}.property('content')
});
App.SiteEditController = Em.ObjectController.extend({
needs : [ 'site' ]
});
Template
{{#with controllers.site}}
<div>{{ isDirty }}</div>
<div>{{ isNotDirty }}</div>
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
{{view Ember.TextField valueBinding="name"}}
</div>
</div>
<div class="form-actions">
<button {{bindAttr disabled="isNotDirty"}} class="btn btn-primary">Save</button>
</div>
{{/with}}
I outputted the isDirty an isNotDirty property so I could watch them change. But only the isDirty property changes when I change the value of the text-field,
The solution can be found in the API-docs of Ember. There is a list of all available shorthand computed helpers.
I used Ember.computed.not for this case:
App.SiteController = Em.ObjectController.extend({
isNotDirty: Ember.computed.not('isDirty')
});