application.hbs
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
{{navigation-bar class="mdl-layout__header"}}
{{#if Auth.authenticated}} //Auth is a service
{{navigation-drawer class="mdl-layout__drawer"}}
{{/if}}
<main class="mdl-layout__content">
<div class="page-content">
{{outlet}}
</div>
</main>
</div>
navigation-drawer.hbs
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
{{#if Auth.authenticated}}
<span>Hi {{name}}</span>
<button type="button" name="logout">Logout</button>
{{else}}
{{#link-to 'login'}}Login{{/link-to}}
{{/if}}
</nav>
navigation-drawer.js
import Ember from 'ember';
/* globals componentHandler */
export default Ember.Component.extend({
Auth: Ember.inject.service('Auth'),
init() {
this._super(...arguments);
if(this.get('Auth').authenticated) {
this.set('name', 'lokesh');
}
},
didInsertElement () {
this._super(...arguments);
[].forEach.call(this.$(), function (el) {
componentHandler.upgradeElement(el);
});
}
});
navigation-bar.hbs
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Title</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation mdl-layout--large-screen-only">
{{#if Auth.authenticated}}
<button type="button" name="logout" {{action 'logout'}}>Logout</button>
{{else}}
{{#link-to 'login'}}Login{{/link-to}}
{{/if}}
</nav>
</div>
navigation-bar.js
import Ember from 'ember';
export default Ember.Component.extend({
Auth: Ember.inject.service('Auth'),
actions: {
logout() {
this.get('Auth').logout();
}
}
});
Login route
import Ember from 'ember';
export default Ember.Route.extend({
Auth: Ember.inject.service('Auth'),
actions: {
authenticate() {
this.get('Auth').login();
this.transitionTo('/');
}
}
});
<h3>Login Page</h3>
<button type="button" name="button"{{action 'authenticate'}} class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Login</button>
What i am trying to do?
I have a application route which has a navigation-bar displayed at all time and a navigation-drawer which should be displayed only if the user is logged in. so i wrote a {{#if Auth.authenticated}} condition to hide navigation-drawer. once user click login button in login route i am updating the AUTH service which is used across all the files. once user click login, he will routed to application route again. This time the condition {{#if Auth.authenticated}} will be true and navigation-drawer should show up. i checked in DOM. it has drawer. But the drawer button is not showing. When i refresh the page, it showed up. so i understood, material is acting on those components only during the onload time. However i understood that componentHandler.upgradeElement() is useful in case dynamic compoenents. i tried it in navigation-drawer.js. But it didn't work. Where i went wrong?
Just before upgradeElement, you may want to downgrade nodes under layout or immediate parent and them upgrade them. That way all the nodes get reset and load correctly. This worked for me.
componentHandler.downgradeElements(document.querySelector(".mdl-layout"));
componentHandler.upgradeDom();
Related
I'm trying to open a modal dialog form in Ember - I have a form that I'd like users to submit a comment to before processing a workflow, but so far I've been unable to find any good documentation on how to open a modal dialog (where to put controllers, routes, models, etc.). I am new to Ember, so please bear with me. Thanks.
I followed Ember Guru's guide called "Master you're modals" on Ember, and they work great!
create template here:
create component called my-modal. Add the following in the components js:
export default Ember.Component.extend({
actions: {
ok: function() {
this.$('.modal').modal('hide');
this.sendAction('ok');
}
},
show: Ember.on('didInsertElement', function() {
Ember.on('hidden.bs.modal', function() {
this.sendAction('close');
}.bind(this), this.$('.modal').modal());
})
});
Add the following code to the components hbs (template):
<div class="modal fade" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-center">{{title}}</h2>
</div>
{{yield}}
<div class="modal-footer">
</div>
</div>
</div>
</div>
Now you need to create a template for the specific use of the modal where you call the component. Call it: waitingModal or loadingModal or whatever you like. In this modal template you call the component like so:
{{#my-modal title='Loading Modal' ok='save' close='removeModal'}}
{{/my-modal}}
Add the following to the application route:
showModal: function(name, model) {
this.render(name, {
into: 'application',
outlet: 'modal',
model: model
});
},
Lastly to call a modal after clicking a button, in the button's action you need to call:
this.send('showModal','loading-modal');
where loading-modal is the specific template you're calling.
and to remove the modal:
this.send('removeModal');
Hope this helps!
You could use an addon or implement the recipe from the cookbook.
I'm using ember-dialog. Just one command ember install ember-dialog and dialogs on aboard. Here is example of use you're looking for:
export default Ember.Controller.extend({
// Injecting dialog service
dialog: Ember.inject.service(),
model: { username: "Something" },
actions: {
showForm: function() {
this.get("dialog").blank("path-to-some-form", this, {
acceptHandler: "save"
});
},
save: function(presenter) {
var isValid = true;
if (isValid) {
// Closing presenter
presenter.accept();
}
}
}
});
Template (/app/templates/path-to-some-form.hbs):
<form {{action "accept" on='submit'}}>
{{!-- contextObject here is controller --}}
{{input value=contextObject.model.username}}
<button class="w-btn w-btn__default" type="submit">Send</button>
<button class="w-btn w-btn__danger" type="button" {{action "decline"}}>Cancel</button>
</form>
I've only just started using Ember and am struggling with a couple of concepts. I used Knockout for a previous application which was great, and I can already see how Ember will help me be more structured and write less code. Although I could go back to Knockout and get this up and running pretty quickly, I really want to persevere with Ember.
The bit I'm struggling with is the right way and place to load related records. My app has a list of systems, and a list of suppliers related to each system. Each system may have one or more suppliers, and vice-versa.
So far I have a route called Systems with a corresponding controller and template. The model hook on the route gets the list of systems from an API (I'm using Ember Data). The systems are displayed as a list via the template, and when the user selects one (via a radio button) I need to load and display the related suppliers. That's the bit I'm not sure about.
I'm not changing the URL here, just displaying an additional list of suppliers underneath the list of systems so adding a new route doesn't sound quite right. Conceptually what would be the best way to do this?
Should I use an action in the controller to load and display the data? That doesn't sound quite right either as the model hooks are all in the routes.
Should I just load the data all up front and filter it (and toggle display) using the controller?
Is there a right, or better, way?
Here's the current code.
System Model
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
suppliers: DS.hasMany('supplier')
});
Supplier Model
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
systems: DS.hasMany('system')
});
Systems Route
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.find('system');
}
});
Systems Controller
import Ember from 'ember';
export default Ember.ObjectController.extend({
systemSelected: false,
actions: {
selectSystem: function(id) {
this.set('systemSelected', true);
console.log(id);
},
selectSupplier: function(supplier) {
console.log(supplier);
}
}
});
Systems Template
<h1>systems</h1>
<form id="systems">
<fieldset>
<div class="form-group">
<label for="system" class="control-label">Select the system</label>
{{#each}}
<div class="radio">
<label>
<input type="radio" name="system" value="{{id}}" {{action 'selectSystem' id}}>
<span>{{name}}</span>
</label>
</div>
{{/each}}
</div>
{{#if systemSelected}}
<div class="form-group">
<label for="supplier" class="control-label">Select the supplier</label>
{{#each suppliers}}
<div class="radio">
<label>
<input type="radio" name="supplier" value="{{id}}" {{action 'selectSupplier' supplier}}>
<span>{{name}}</span>
</label>
</div>
{{/each}}
</div>
{{/if}}
</fieldset>
</form>
The way to handle this is pretty simple. You just load both related models in your route. You do that using RSVP.
First of all, we'll need a Suppliers Controller, but just a really basic one to store all the Suppliers:
App.SuppliersController = Ember.ArrayController.extend();
In your Systems Route, fetch the models like this and set them to the correct model properties:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return Ember.RSVP.hash({
systems: store.find('system'),
suppliers: store.find('suppliers')
});
},
setupController(controller,models) {
this.controllerFor('systems').set('model',models.systems);
this.controllerFor('suppliers').set('model',models.suppliers);
}
});
Then in your Systems Controller, add the Suppliers Controller to the needs:
import Ember from 'ember';
export default Ember.ObjectController.extend({
needs:['systems'],
systemSelected: false,
actions: {
selectSystem: function(id) {
this.set('systemSelected', true);
console.log(id);
},
selectSupplier: function(supplier) {
console.log(supplier);
}
}
});
You might want to use an ArrayController instead of an ObjectController for Systems Controller since it stores more than one object.
Then in your Systems Template, you can access the Systems Controller as a property of your main controller, like this:
<h1>systems</h1>
<form id="systems">
<fieldset>
<div class="form-group">
<label for="system" class="control-label">Select the system</label>
{{#each system in controllers.systems}}
<div class="radio">
<label>
<input type="radio" name="system" value="{{id}}" {{action 'selectSystem' id}}>
<span>{{name}}</span>
</label>
</div>
{{/each}}
</div>
{{#if systemSelected}}
<div class="form-group">
<label for="supplier" class="control-label">Select the supplier</label>
{{#each suppliers}}
<div class="radio">
<label>
<input type="radio" name="supplier" value="{{id}}" {{action 'selectSupplier' supplier}}>
<span>{{name}}</span>
</label>
</div>
{{/each}}
</div>
{{/if}}
</fieldset>
</form>
There ya go. Hope that helps. There are other ways to do this, but this is the most Emberific way to do it that I know.
Just when I think that I'm getting a handle on ember, this happens and I run into a brick wall.
I have
App.Router.map(function() {
this.resource('customers', function() {
this.resource('customer', {
path : ':customer_id'
});
customers route :
App.CustomersRoute = Ember.Route.extend({
model: function() {
return this.store.find('customer');
},
customer controller :
App.CustomerController = Em.ObjectController.extend({
needs: ['state'],
isEditing: false,
isNotEditing: Ember.computed.not('isEditing'),
actions : {
startEditing: function() {
this.set('isEditing',true);
this.set('validationErrors', '');
},
save: function() {
and these templates :
<script type="text/x-handlebars" data-template-name="customers">
...
{{outlet}}
...
</script>
<script type="text/x-handlebars" data-template-name="customer">
...
{{#if isEditing}}
<div class="well well-sm">
<a class="btn btn-success" {{action save}}>Save</a>
<a class="btn btn-warning" {{action cancel}}>Cancel</a>
</div>
{{else}}
<div class="well well-sm">
<a class="btn btn-primary" {{action startEditing}}>Edit</a>
<a class="btn btn-danger" {{action delete}}>Remove</a>
</div>
{{/if}}
this is all working well for me. I can select a customer, press the edit button, form inputs get enabled, press the save button and changed data is persistent back to the db
however : this is my brick wall.
How do I enable a feature to create a new record : I dont want to duplicate the edit form, just show blanks
I am assuming that I need to put "new" into the router map
this.resource('customers', function() {
this.resource('customer', {
path : ':customer_id'
});
route('new');
});
but do I create a CustomerNew controller and CustomerNew route and CustomerNew template ?
I have put an action into the customers controller
<a class="btn btn-primary btn-xs pull-right" {{action startNew}}>New</a>
do I really need to create a route & controller & template just to handle the new action ? Or can I reuse the customer/1 route/controller/template ?
thanks
To do things The Ember Way (TM) you'd want to use a new route, controller, and template. Ember does make it easy to consolidate your logic and not have to duplicate code. In templates you can do this with partial, and in your JS code you can do it with Ember.Mixin.
Here's a JSBin of the general idea : http://jsbin.com/ucanam/1056/edit
Here's the interesting parts of the templates :
<script type="text/x-handlebars" data-template-name="customers/new">
Add a new customer<br/>
{{partial "customers/form"}}
</script>
<script type="text/x-handlebars" data-template-name="customer/edit">
Edit a customer<br/>
{{partial "customers/form"}}
</script>
<script type="text/x-handlebars" data-template-name="customers/_form">
{{input value=name}}
<button {{action save}}>Save</button>
<button {{action cancel}}>Cancel</button>
</script>
And then the controllers :
App.CrudController = Ember.Mixin.create({
actions : {
save : function(){
this.get('model').save();
this.transitionToRoute('customers');
},
cancel : function(){
this.get('model').rollback();
this.transitionToRoute('customers');
}
}
});
App.CustomersNewController = Ember.ObjectController.extend(App.CrudController,{});
App.CustomerEditController = Ember.ObjectController.extend(App.CrudController,{});
I am attempting to write a login/logout widget with ember. I want to toggle the isLoggedIn property such that when a user logs out it is set to False and, True when a user logs in. isLoggedIn is defined in my application controller and called with handlebars in my application template. For now, I need to set the value of of isLoggedIn to true when a user logs in successfully and the Login function is activated inside of LoginController - and logout when the user clicks logout. So my question is: how can I have LoginController & application controller access each other and change variables within them.
Here is some code from the application template:
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
...
{{#if isLoggedIn}}
<li><a href="#" {{ action "logout" }}>Logout</a></li>
{{else}}
<li>
{{#linkTo "login"}}Login{{/linkTo}} </li>
{{/if}}
</ul>
</section>
</nav>
{{outlet}}
application controller:
var App;
App = require('app');
module.exports = App.ApplicationController = Ember.ObjectController.extend({
isLoggedIn: false,
logout: function(){
this.set("isLoggedIn", false);
console.log(this.token);
}
});
login template:
...
<form class="form-horizontal" {{action "login" on="submit"}}>
...
<div class="row">
<div class="large-5 columns">
<label>Username</label>
{{input value=username type="text" placeholder="Username"}}
</div>
<div class="large-5 columns">
<label>Password</label>
{{input value=password type="password" placeholder="Password"}}
</div>
<div class="large-2 columns">
</br>
{{input class="small button" type="submit" value="Log In"}}
</div>
</div>
</form>
{{#if errorMessage}}
<div class="large-12 columns alert-box alert">{{errorMessage}}</div>
{{/if}}
{{/if}}
LoginController:
var App;
App = require('app');
module.exports = App.LoginController = Ember.ObjectController.extend({
//some variables...
//other functions...
login: function() {
// set isLoggedIn to true here
...}
});
initially the navbar will see that isLoggedIn is false and therefore show Login. Once you successfully login and click submit, an action will fire off and activate login() inside of LoginController. That is where I want to set isLoggedIn to true such that Logout will appear on the navbar.
Have you tried:
module.exports = App.LoginController = Ember.ObjectController.extend({
needs: ['application']
login: function() {
if (authentification sucess) {
this.set('controllers.application.isLoggedIn', true);
} else {
this.set('controllers.application.isLoggedIn', false);
}
}
});
To access other controllers instances, you use the needs property. Each specified controller will be injected in the controllers property. So needs: ['application'], injects the application controller in controllers.applicaiton.
I've got a list of messages that are provided by a Rails backend. What I need is when the "toggle_visibility" action button is pressed, it would toggle the "publicly_viewable" property. This means, making a corresponding REST call (to effect the database) and changing the state of the corresponding cached message. Here is where I'm at so far.
Here's what I've got so far, that manages to end up on the debug console:
# app.js
App.Store = DS.Store.extend({
revision: 12,
adapter: DS.RESTAdapter.extend({
url: 'http://localhost:3000'
})
});
App.Message = DS.Model.extend({
body: DS.attr('string'),
mobile_number: DS.attr('string'),
publicly_viewable: DS.attr('boolean'),
created_at: DS.attr('date')
});
App.Router.map(function() {
this.resource('messages');
});
App.MessagesRoute = Ember.Route.extend({
model: function() { return App.Message.find() }
});
App.MessagesController = Ember.ArrayController.extend({
toggle_visibility: function(){
debugger;
}
});
# index.html
{{#each model}}
<button class="close" {{action toggle_visibility this}}><i class="icon-eye-close"></i></button>
<p class="message_body lead">{{body}}</p>
<small class="source_number">from {{mobile_number}}, received {{date created_at}}</small>
{{/each}}
I've been spending the past few hours reading through the Ember Guides and while I've gotten an idea on what the different classes there are, I still can't visualize clearly how to go about it. Particularly, I'm not sure if this should be a route concern or a controller, and I know that if ever it was a controller responsibility, I know that it should be on an ObjectController but I've been having trouble making it work.
You can use ArrayController#itemController and define a controller for the individual record in your ModelArray. Then you have to specify in the Array Controller the Object Controller responsible for a single object, which you have to reference as well in Handlebars. You can do something like this:
JS:
App.MessageController = Ember.ObjectController.extend({
visibilityClass: function() {
var visibility = this.get('model.publiclyViewable');
return 'toggle-visibility mdi-action-visibility%#'.fmt(
visibility ? '':'-off'
);
}.property('model.publiclyViewable'),
actions: {
toggleVisibility: function() {
var model = this.get('model');
model.toggleProperty('publiclyViewable');
model.save();
}
}
});
Handlebars:
<script type="text/x-handlebars" data-template-name="messages">
<!--
At this point the {{each}} helper will know how to lookup for
the controller simply by it's name
-->
{{#each model itemController="message"}}
<div class="panel panel-primary">
<div class="panel-heading">
<div class="pull-left">
<h3 class="panel-title">{{title}}</h3>
</div>
<div class="pull-right">
<a {{action 'toggleVisibility'}}>
<i class={{visibilityClass}} style="color: #FFF"></i>
</a>
</div>
</div>
<div class="panel-body">
{{body}}
</div>
<div class="panel-footer">
<i class="mdi-communication-quick-contacts-dialer"></i> {{mobileNumber}}
<i class="mdi-notification-event-note"></i> {{createdAt}}
</div>
</div>
{{/each}}
</script>
(see fiddle)
Note: Updated to Ember 1.11.x-beta and changed the code a little bit