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
Related
{{#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.
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/
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 am trying to get Ember.Select to work and am almost there. I have put up an example: http://exmer.com/selecttest/pages
To see my problem click on some Recent Pages and click edit. The select is not fetching the model via contentBinding="controllers.modelnames". If you click to modelnames route and edit some Recent Pages again it works correct because now we fetched the modelnames. I can perhaps fetch the modelnames from the page controller myself but this seems to me more like a hack.
The source is on https://github.com/broerse/ember-select-test (it runs without CouchDB)
So my question is: What is the correct way to use Ember.Select with Ember-CLI
Understanding the ember workflow is really important here. When you navigate to a URL Ember parses the URL and maps it to your router. At that point Ember knows it needs to fetch the models from each resource/route that are part of the URL. Once it's fetched all of those models it decorates them with the associated controllers. This right here describes where your issue is. Just using a controller doesn't cause a model to be fetched. You're using needs on a controller which isn't a parent/ancestor in your router, so you aren't guaranteed it will be populated. You'll need to manually fetch the model and store it on the other controller, or fetch the model and store it on the current controller in order to make sure it exists when you visit that route.
Ember select works the same everywhere (ember cli or not), no matter if it's ember data or some other library or just pojos.
hbs
{{view 'select' content=model
optionValuePath='content.id'
optionLabelPath='content.name'
selection=selectedModel}}
That would mean your model has an id attribute and a name attribute. The model would be populated from the route, if it's a secondary model, you can use this.modelFor in the route and set it to a different attribute on the controller in setupController on the route.
The issues with Ember select is performance and that it's not a component.
I am getting started with Ember, and Django Rest Framework and I can't seem to peice together how to connect a model so that Ember can use the data in that model and create a simple drop down box. I have one model that I am starting with that is as such:
id
name
security
status
All I want to achieve is allowing Ember to use the data in this model and create a dropdown like so.
<select id="model">
<option value="model.ID">model.Name</option>
</select>
Can anyone help me with this? I am complete new to Ember and Django Rest.
Without going into a ton of detail, I've created a mini example of what you're looking for
http://emberjs.jsbin.com/Ozimatuj/2/edit
You'll note that I'm using mockjax, so instead of hitting any real endpoint, it's all mocked. Additionally I'd recommend using a client side record management solution (such as ember-data or ember-model). That's another discussion though.
In the application route (which correlates with the root of your app) it hits the model hook (which should return the model associated with that route. I'm returning a POJO of the users. That model is being assigned as the content of the application controller (automatically generated). The the application template is being built, and it's being backed by the application controller. Inside the application template we create an instance of ember select, and we tell it that the content backing it is model (which is the model/content in the application controller). We also say, use bind the user model (you could do id) and the name to the value and the label respectively.
I then bound the value of the select to selectedPerson, so anytime the value changes, the selectedPerson updates, the template which talks about that person will update. Magic. Ember does the rest.
This is a really broad question, so if you have any other questions, please ask a specific question, and I'd really recommend going through the getting started guide, it's really short, but will give you a decent foundation of terminology and methodology of Ember. http://emberjs.com/guides/getting-started/
For Ember Data I'd do a quick read the of the transition document for ED 1.0 beta.
https://github.com/emberjs/data/blob/master/TRANSITION.md
DS.DjangoRESTSerializer = DS.RESTSerializer.extend();
DS.DjangoRESTAdapter = DS.RESTAdapter.extend({
defaultSerializer: "DS/djangoREST"
});