{{#link-to "login"}}<span {{action 'loginfunc'}}>Login</span>{{/link-to}}
the above code is in my ember signup template , i have linked to login template.
I wanted to call my 'loginfunc' in my login controller, but the complier is checking 'loginfunc' inside the sign up controller, can you please tell me why, i'm a beginner. someone guide me with this.
Welcome to SO as well as the Ember community.
By default, in Ember, the structure for a page (say, signup) would be like,
signup template: UI markup layout
signup route file: Handles the routing and data fetching part
signup controller file: Handles the data processing and act as backing class
The things you refer to in a template will usually be looked up in the backing "controller" file. Hence, if you refer to an action in the signup template will be looked up in the signup controller.
If you want to call a method in login controller after transitioning to login route, try invoking it inside one of the dedicated hooks/events such as setupController, activate etc., inside the login route file.
Related
This is a pretty newbie question. However, in EmberJS, I've found that both of the methods work for linking to the blog page in my application.
<p>{{#link-to 'posts'}} See my blog{{/link-to}}</p>
See my blog
Is it better to use {{link-to}} in EmberJS? How come?
The difference is that the {{link-to}} component will navigate to the specified route within the current running Ember application, while <a href="posts"> will do a new browser request to that location and re-start your Ember app at that route. You should use {{link-to}} since you'll be using the Ember internals to navigate within your single-page application and it will be a smoother user experience.
While they both can work, watch your browser closely and you'll see the anchor tag will give you a page refresh and re-launch your Ember app (though in the right location). Using a {{link-to}} will feel faster since Ember is presenting the new page via javascript rather than restarting after a page refresh. It's the difference between navigating within a single-page application, and jumping into a SPA from an external page.
While Ember does render an anchor tag in place of the {{link-to}} at run-time, it interjects to stop the default anchor tag behaviour. The docs explain it like so:
By default the {{link-to}} component prevents the default browser
action by calling preventDefault() as this sort of action bubbling is
normally handled internally and we do not want to take the browser to
a new URL (for example).
(from https://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_allowing-default-action)
Also, with the {{link-to}} component you can pass a model directly into the route. This is a bit more advanced, but the Ember guides have some good examples.
https://guides.emberjs.com/v2.13.0/templates/links/
I want to have two layouts, one for guests which can see some routes like: /, /contacts, /rules, etc... and another one for authenticated users, it means they must login before they can go to authorized routes. How can I define two layouts for different groups of routes?
there is a way to use Ember's router to your advantage to solve this problem by nesting the authenticated routes inside a route. Here's an example router:
Router.map(function() {
this.route('contacts');
this.route('rules');
this.route('authenticated', { path: '/' }, function() {
this.route('settings');
this.route('profile');
});
});
Going to /contacts and /rules wouldn't need any authentication, but going to /settings would.
Notice the path option passed to the authenticated route. Since we set it to / so it doesn't show up in the URL, it'll take the place of application.index. If this sounds strange to you, read about what an index page is in the Ember.js tutorial.
The answer is to maintain a service that saves the user's state.
// services/user-state
import Ember from 'ember';
export default Ember.Service.extend({
loggedIn: true
});
Then, depending on how you organized things, you could inject the service into a controller or a route. So - you'd have access to loggedIn
In your template, you would use handlebars/htmlbars if helper.
{{#if loggedIn}}
render logged-in stuff...
{{/else}}
render message explaining that this is only for logged in users
{{/if}}
You can also redirect the user to another route based on the current session data. You may have entire routes that are for certain roles, or you may have portions of your template that behave differently based on role.
If you weren't logged in, then you may not be able to visit your profile page. That route may be off limits entirely, or it may redirect you to a login page. On the other hand, maybe it's just a "login" button component or a portion of your template that shows if you aren't logged in vs. "hello sheriffderek" if you were.
There are also Ember addons for more robust "role" outlines. Think about a blog page, that may have an 'edit' button for the actual user, but 'flag' button for a moderator. In this case, you can't just have an entirely different route nested somewhere.
Most authentication addons / libraries are going to have a 'service' with some sort of session state. But Template wise, the basic idea is like a JS if/else statement.
if (helpful) {
this.upvote();
} else {
// something else
}
I hope this helps. : )
Have a look at the ember-simple-auth addon.
It has many useful classes all about authorization, including mixins for your usecase. If you want to make route only visible for logged-in users, simply use the AuthenticatedRouteMixin like this:
/app/routes/protectedRoute.js
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin);
I have my problem with link-to help, I want to use it with bootstrap navigation, but I can't manage well active link state, so I'm trying to write a component, but I need to get the current route inside the component, so I can create the html element based on the route.
I searched in the api reference, but didn't find nothing.
PS: I know there is an add-on to do that by I'm doing that to learn the framework.
sorry for my bad English.
/ controller.hbs
{{ my-component controller=this }}
# my-component.coffee
#get('controller.target') # this is the route
If you need the CURRENT route, as opposed to the route associated with the controller that your component is instantiated in, you would inject the application controller into your component, and get the current route.
applicationController: Ember.inject.controller('application')
currentPath: Ember.computed.alias 'applicationController.currentPath'
http://emberjs.com/api/classes/Ember.Controller.html#property_target
Using Ember 1.13
I may be missing something and going about this in the totally wrong way.
I have session state saved in an ember service that is available to all my controllers. It has a boolean property isExistingSession.
In the header of my app I want to conditionally display a login button or user info depending on the value of isExistingSession.
As far as I know I can't use the service property directly in my handlebar so my solution was to create a computed property on the applicationController that always equals the value of of isExistingSession on the sessionService
export default Ember.Controller.extend({
isExistingSession: function () {
return sessionService.get('isExistingSession');
}.property('sessionService.isExistingSession'),
But the computing the property off of an outside entity seems to be invalid.
Any idea on how to accomplish this?
As far as I know I can't use the service property directly in my handlebar
Just to clarify: any property available in a given controller will be available in its associated template. So if you inject your session service in your application controller you should be able to use any property of that service in your application.hbs template.
Now to solve your issue: how do you inject the service in your controller? You have 2 alternatives:
application.inject('controller', 'sessionService', 'service:session'); This will inject your session service in all the controllers, making in available to all your templates as well. (see http://guides.emberjs.com/v1.10.0/understanding-ember/dependency-injection-and-service-lookup/)
sessionService: Ember.inject.service('session'), This will inject your session service in a single controller (see http://emberjs.com/api/classes/Ember.inject.html#method_service)
Bottom line is that you should not need a computed property. I'd recommend using the Ember inspector to check whether your session is properly injected in your controller.
Also, consider using ember-simple-auth, an awesome add-on to manage authentication in Ember.
I have two controllers and two view: homepage and joblist.
I have a career.html.erb file and index.html.erb in homepage view. In career.html.erb, I have created a simple HTML form with labels and textboxes.
Homepage controller is a simple one with only view files. joblist controller is scaffolded. I have created jobs as well.
Now I just want my carrer.html.erb file form in homepage view to access and show in label the 'jobtitle' filed value of joblist controller.
Ho can I do that?
It is bit tricky. Whenever user made a request to webpage from browser, rails server map that request to controller actions by using mapping defined in routes.rb file. Routing tells rails application this request is for what controller. Now rails engine instantiate that particular controller and call action method on that controller object. SO NO METHOD OR VARIABLE IS NOT AVAILABLE IN VIEW. You can only get variables from that particular action.
For more details ruby rails web request response lifecycle
Views are rendered by controllers. You set instance variables (variables started by # sign) in controller and use these variables in view. So you need to set variables in same controllers from where you render views.