Scope within a template - ember.js

I use the following template to display a table of all users.
<script type="text/x-handlebars" data-template-name="users">
<table>
{{#each model itemController="user"}}
<tr>
<td>{{lastName}}</td>
<td>
{{#if isNew}}
<button {{action 'save' this}} class="btn btn-small">Save</button>
<button {{action 'discard' this}} class="btn btn-small">Discard</button>
{{else}}
{{#linkTo 'user.edit' this activeClass="disabled" classNames="btn btn-small"}}Edit{{/linkTo}}
{{/if}}
</td>
</tr>
{{/each}}
</table>
{{#unless newUserCreate}}
<p>
{{#linkTo 'users.new' classNames="btn btn-small"}}Create a new user{{/linkTo}}
</p>
{{/unless}}
</script>
Below the table I use a {{#unless newUserCreate}} which I'd like to use within the table too but because of a different scope I can't. How can I fix the following snippet to get it working? The User doesn't have a newUserCreate. Only the Users has.
{{#if isNew}}
{{#unless newUserCreate}}
<button {{action 'save' this}} class="btn btn-small">Save</button>
<button {{action 'discard' this}} class="btn btn-small">Discard</button>
{{/unless}}
{{else}}
{{#linkTo 'user.edit' this activeClass="disabled" classNames="btn btn-small"}}Edit{{/linkTo}}
{{/if}}
app.js
App.UsersRoute = Ember.Route.extend({
model: function() {
return App.User.find();
}
});
App.UsersNewRoute = Ember.Route.extend({
model: function() {
return App.User.createRecord();
},
renderTemplate: function() {
this.render({ into: 'users' });
},
activate: function() {
this.controllerFor('users').set('newUserCreate', true);
},
deactivate: function() {
this.controllerFor('users').set('newUserCreate', false);
}
});

Related

delete multiple records on EmberJS using {{input type="checkbox"}}

I would like to have an action that prints all the selected check-boxes on my table to the console.
in my controller I have
removedSelected: function() {
let selected = this.filterBy('isSelected', true);
console.log(selected);
}
in my template file I have
{{input type="checkbox" checked="isSelected"}}
I have setup my controller to filter all the records that are "isSelected" in the table by using input helper on ember.
I am getting an error on the console which states this.filterBy is not a function
Do i need to setup an array to handle this first?
Below is more of the code for a better picture.
Thanks!
// templates/warranty/index.hbs
<div class="container">
<h4>List</h4>
<div class="row">
<div class="col-sm-3">
<div class="control-group">
{{#link-to 'warranty.new' class="btn btn-primary btn-sm"}}New Claim{{/link-to}}
<button class="btn btn-primary btn-sm" {{action "toggleMultiple"}}>Select</button>
{{#if canDeleteMultiple}}<button class="btn btn-danger btn-sm"{{action "removedSelected" warranty}}>Delete Selected</button>{{/if}}
</div>
</div>
<div class="container">
<table class="table table-striped table-hover ">
<thead>
<tr>
{{#if canDeleteMultiple}}<th>Select</th>{{/if}}
<th>Action</th>
<th>Claim ID</th>
<th>Claim Status</th>
<th>Serial Number</th>
<th>Issue Description</th>
</tr>
</thead>
<tbody>
{{#each model as |warranty|}}
<tr>
{{#if canDeleteMultiple}}{{input type="checkbox" checked="isSelected"}}{{/if}}
<td>{{#link-to 'warranty.edit' warranty.id class='btn btn-success btn-xs'}}Edit{{/link-to}}<button class="btn btn-danger btn-xs" {{action "deleteWarranty" warranty}}>Delete</button></td>
<td>{{warranty.id}}</td>
<td>{{warranty.claimStatus}}</td>
<td>{{warranty.serialNumber}}</td>
<td>{{warranty.issueDescription}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
// app/controllers/warranty/index.js
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
toggleMultiple() {
this.toggleProperty('canDeleteMultiple');
},
removedSelected: function() {
let selected = this.filterBy('isSelected', true);
console.log(selected);
}
}
});
I have done this way, you can check the twiddle (https://ember-twiddle.com/aa88cd0442ec0d2219e792d58ab8b703?openFiles=templates.index.hbs%2Ctemplates.components.checkbox-component.hbs), same thing as mention by kumkanillam,
in your index.hbs i used checkbox as a component,
{{checkbox-component isChecked=warranty.isSelected action=deleteItems index=index}}{{/if}}
and in controller actions,
removedSelected: function() {
let selected = this.get('model').filterBy('isSelected', true);
console.log(selected);
}
In your hbs file,
{{input type="checkbox" checked=warranty.isSelected }}
OR
<input type="checkbox" checked={{warranty.isSelected}} onchange={{action (mut warranty.isSelected) value="target.checked" }}>
and in your controller,
removedSelected: function() {
let selected = this.get('model').filterBy('isSelected', true);
console.log(selected);
}

Ember partials and actions

I have this issue trying to use an ember partial and an action that targets the view
...
<li class="buttonsList-item-horizontal btn btn-lg btn-secondary" {{action restore this target='view'}}>
<i class="fa fa-refresh"></i>
<span class="btn-text">Restore</span>
</li>
...
If I use this code inside a partial is not working if I use it directly in the template it works.
Any ideas or suggestions to accomplish the same result?
the template is
...
<ul class="list">
<li class="list-item list-item-separator">{{group.key}}</li>
{{#each content}}
{{partial 'templateElement'}}
{{/each}}
</ul>
...
Assuming you are talking about the view, and not the template which you called the view above you have the logic correct.
App.IndexView = Em.View.extend({
actions:{
blah:function(){
console.log('asdf');
}
}
});
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model}}
<li>{{partial 'foo'}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="foo">
<button {{action 'blah' target='view'}}>{{item}}</button>
</script>
http://emberjs.jsbin.com/hocanilu/1/edit

Submitting form from a modal in Ember

I am trying to make a registration page in ember which is opened when someone clicks the registration button. The registration page is opened in a modal. I used the modal implementation given on Ember websit
http://emberjs.com/guides/cookbook/user_interface_and_interaction/using_modal_dialogs/
Now the registration form opens on clicking the button but I am not able to catch the submit event of the registration form anywhere. You can refer to the code here:
http://jsfiddle.net/jywPL/1/
<script type="text/x-handlebars">
{{outlet}}
{{outlet modal}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h4>Register</h5>
{{outlet}}
<button {{action 'openModal' 'modal' model}}>Register</button>
</script>
<script type="text/x-handlebars" data-template-name="modal">
{{#modal-dialog action="close"}}
<form class="form-horizontal" {{action "register" on="submit"}}>
<br/>
<div align="center" >
<table class="table-hover">
<tr>
<td>
<label>First Name</label>
</td>
<td>
{{input value=firstName class="controls" type="text"}}
</td>
</tr>
<tr>
<td>
<label>Last Name</label>
</td>
<td>
{{input value=lastName class="controls" type="text"}}
</td>
</tr>
<tr>
<td>
<label>Email</label>
</td>
<td>
{{input value=email class="controls" type="text"}}
</td>
</tr>
<tr>
<td>
<label>Company</label>
</td>
<td>
{{input value=company class="controls" type="text"}}
</td>
</tr>
<tr>
<td>
<label>Company Contact</label>
</td>
<td>
{{input value=contact class="controls" type="text"}}
</td>
</tr>
<tr>
<td>
<label>Reason for request</label>
</td>
<td>
{{view Ember.TextArea valueBinding="reason" rows="10" cols="20"}}
</td>
</tr>
</table>
<br/>
<button type="submit">Register</button>
<button {{action "close"}}>Done</button>
</div>
</form>
{{/modal-dialog}}
</script>
<script type="text/x-handlebars" id="components/modal-dialog">
<div class="overlay" {{action "close"}}>
<div class="modal" {{action bubbles=false}}>
{{yield}}
</div>
</div>
</script>
var App = Ember.Application.create();
App.ApplicationRoute = Ember.Route.extend({
actions: {
openModal: function(modalName, model) {
this.controllerFor(modalName).set('model', model);
return this.render(modalName, {
into: 'application',
outlet: 'modal'
});
},
closeModal: function() {
return this.disconnectOutlet({
outlet: 'modal',
parentView: 'application'
});
},
register: function() {
alert('hello');
}
}
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return Em.Object.create({firstName: '',lastName: '',email:'',company:'',contact:'',reason:''});
},
action: {
register: function(){
alert('Registering');
}
}
});
App.ModalController = Ember.ObjectController.extend({
actions: {
close: function() {
return this.send('closeModal');
},
register: function(){
alert('hello1');
}
}
});
App.ModalDialogComponent = Ember.Component.extend({
actions: {
close: function() {
return this.sendAction();
},
register: function(){
alert('hello2');
}
}
});
.I have tried to trigger action helper called register on form submit but the register action is not triggered. From the modal implementation I see that the action bubbling has been disabled so the action wouldn't be triggered in any of the parent routes. But why is it not triggering in ModalDialogComponent actions tag.
In your ModalController Route, add
action: {
doRegister: function() {
this.register(); //or whatever
}
Then on the submit button
<button type="submit" {{action "doRegister"}}>Register</button>
If your ModalController Route is binding correctly, this should work.

ReferenceError: fav is not defined

I am a noob with emberjs and I am stuck at the issue for a while now. I created an itemController with the variable fav, but it keeps saying that it is not defined.
My index.html snippet looks like this:
<table class='table'>
{{#each model itemController='hotel'}}
<tr><td>
{{#if fav}}
<h4>{{title}}
<button {{action 'rmFav'}} type="button" class="btn btn-default btn-sm pull-right">
<span class="glyphicon glyphicon-heart"></span>
</button>
</h4>
{{else}}
<h4>{{title}}
<button type="button" class="btn btn-default btn-sm pull-right" {{action 'putFav'}}>
<span class="glyphicon glyphicon-heart-empty"></span>
</button>
</h4>
{{/if}}
<p> {{description}} </p>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
</td></tr>
{{/each}}
</table>
and my app.js has the following snippet related to the itemController:
App.HotelController = Ember.ObjectController.extend({
actions: {
putFav: function(){
this.set(fav,true)
},
rmFav: function() {
this.set(fav,false);
}
}
});
UPDATE: Just a clarification, I have an array of objects in json format in app.js file, and each object in it contains fav attribute.
Your problem is with HotelController you are referencing an undeclared variable fav in this.set(fav,...) you need to change to a string, like this.set("fav",...):
App.HotelController = Ember.ObjectController.extend({
actions: {
putFav: function(){
this.set("fav",true);
},
rmFav: function() {
this.set("fav",false);
}
}
});

Emberjs: Router: Get another controller to connect outlets

<script type="text/x-handlebars" data-template-name="application">
{{view App.UiMenuView}}
{{view App.UiMainContainerView}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="uiMainContainer">
<div id="uiMainContainer">
<div id="uiMainContainerSidebar">
{{#view App.SidebarView}}
<ul id="uiMainContainerSidebarList">
<li><a {{bindAttr href="view.tasksUrl"}}>Tasks</a></li>
<li><a {{bindAttr href="view.milestonesUrl"}}>Milestones</a></li>
<li><a {{bindAttr href="view.projectsUrl"}}>Projects</a></li>
<li><a {{bindAttr href="view.customersUrl"}}>Customers</a></li>
</ul>
{{/view}}
</div>
<div id="uiMainContainerContainer">{{outlet}}</div>
</div>
</script>
I am wondering if there's a way to address the specifically the outlet from uiMainContainer? I tried something like:
test: Em.Route.extend({
route: '/test',
connectOutlets: function(router) {
//router.get('applicationController').connectOutlet({ name: 'test' });
router.get('uiMainContainerController').connectOutlet({ name: 'test'});
}
})
This approach, however, seems to do nothing.