Please see: http://jsfiddle.net/ptmoy2/9RRfJ/
I'm using Ember 1.4 in my app. I can display the controller variables in the view's template, but I can't access the same variable from the view. It comes out as 'undefined' when tried outputing to console.
console.log(this.get('dummy'));
I haven't defined a backing model because I don't really need anything persisted in this particular route.
How do I access controller variables from an associated view?
Use this.get('controller.dummy')
Related
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 an Ember 1.10 application with api support for 2 models, Students and Parents, and basic CRUD setup for each model, as well as the ability to read and write messages to/from Students and Parents when visiting their respective /show pages.
I must create an Inbox in which the messages as well as all the other data on Students and Parents is available and must do so without the ability to change or add to the api (i.e. I can' create a Messages endpoint).
Basically, I need to keep the Student and Parent models and controllers as they are, but need to be able to access them from routes namespaced under the Inbox like so:
Students
-inbox
-index
-edit
-show
Parents
-inbox
Inbox
StudentInbox <-- should use StudentsRoute and StudentsController
-index
-show
-edit
ParentInbox
-index
-show
-edit
So that visiting /inbox/students/123 will be using the model defined in the StudentRoute and the actions and properties defined on the StudentController. The InboxStudentsShowRoute should similarly have access to the StudentsShowRoute and Controller.
Instead of copying and pasting the existing code from the Student and Parent routes and controllers, is there a way to proxy actions fired from templates under the Inbox namespace to the relevant models and controllers and maintain the ability to pass in params.
For example, passing in params like ?unread=true while on the InboxStudentsShow route would pass these to the StudentsShowRoute and Controller (and bubble appropriately to it's parent route and controller) or editing a Student from student/inbox/123/edit template would work just as it does on the student/123/edit template?
New to Ember and know there has to be a better way to reuse existing code and proxy actions from a namespace. Any advice would be greatly appreciated!
I'd go here with creating a Mixin which holds same code for Route and specify controllerName, templateName in InboxStudentsShowRoute. Then, you extend from this Mixin in both routes. Model, template, actions, properties will be the same.
For example, passing in params like ?unread=true while on the
InboxStudentsShow route would pass these to the StudentsShowRoute and
Controller (and bubble appropriately to it's parent route and
controller)
I'm not sure what do you mean here by pass these to the StudentsShowRoute and Controller, but CONTROLLER properties changed in one route should remain the same in another route, because controllers are singletons in Ember. I don't know what do you mean by passing query param to another route, because if you transition to other part of your app you change URL and you can't have 2 urls at the same time, so how could query params be passed to another route?
In Ember 1.10 query params are defined in Controllers so I guess behaviour will remain the same.
Example of InboxStudentsShowRoute(move code from StudentsShowRoute to StudentsShowMixin, define controller and template name):
import Ember from 'ember';
import StudentsShowMixin from '../mixins/students-show';
export default Ember.Route.extend(StudentsShowMixin, {
controllerName: 'students/show',
templateName: 'students/show'
});
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.
Problem:
I have a conceptual problem with re-using an old controller instance when the user re-enters the route. In many examples, the controller stores the state of user interaction in instance variables. When the user re-enters the controller those should be reset, but there is no clear mechanism for doing so.
So, there must be a good reason to use a single controller instance. What is it?
How I arrived at this issue:
I ran into a bug in out Ember app, where the controller keeps local state that got out of sync based on the user actions elsewhere. The controller maintains a state whether the user is editing the "name" of a "case". When the controller is instantiated, that is set to "true", but when the user cancels, it's set to "false". Then the user goes away to a different route and comes back to the same route. I get the same controller instance that already has "false" for editing the name. I would expect to have "true" instead.
Ember v.s. Rails:
I'm coming from Rails perspective where controller is instantiated for every request. There is no shared controller state between requests. All instance variables are local to the request, so they can be used safely.
Back to the question:
Why does ember use the same controller instance on separate visits to a route?
The role of a controller in ember and in rails are very different. In rails, as you know, the controller is used as a conduit for the request to prepare the data for presentation. If you consider the use case in ember, this is a role that is primarily played by the router.
In your example you mention that the edit state has gotten out of sync. You can solve this problem in a variety of ways, for example you could move the edit state to the model, so instead of isEditing, you'd call model.isEditing (or just isEditing if you are using an ObjectController). Another option would be to reset the state of the controller when entering the route.
Another example which should illustrate this difference is a save button on a form. Initially you might think "Oh, I'm going to put a save action on my controller". This is logical, when you're thinking like a rails developer, but saving a model is the responsibility of the router (especially if it results in changing the current route as this is something that's intentionally hard to do from a controller).
In ember the role of a controller is as a conduit between the model and the view. The fact that controller instances are re-used is a little confusing, but really isn't that important. When you change or return to a route the model/context of the controller is different, and that is where the state of the view should live... in the model.
Although controllers are usually singleton, when you use {{render}} with a specified model you will get a newly instantiated controller. See rc2 release notes under "Using Render with Multiple Models". I'm new to Ember and this difference confused the heck out of me.
Using a singleton controller when trying to keep per-model-instance user interaction state seems tricky. As jonnii said, you can put the state on the model, and that works but it cruds up the data model. The other thing I have tried is to put a map in the controller (keyed by model, value is an object of user interaction state) but this seems like a clumsy reimplementation of something I'd expect the framework to provide. Still working on this...
I'm calling a web service in a class and needs the result in some page in my project. How could I execute something in my page when the event in that class is fired? note: the calling is asynchronous.
You can do it easily using INotifyPropertyChanged in your view model. Simply bind the view model to your page and when anything changes in the background (e.g. asynchronously), the view should be updated.
Try to use MVVM in your applications and you will be good to go. Also, note you can place view model globally in the App class. This will make it easy to update from one place since everyone has access to App.