I have written a view:
export default Ember.View.extend({
select: null,
modify: null,
createSelect: function() {
return new ol.interaction.Select();
},
onMapCreated: function() {
this.select = this.createSelect();
this.modify = this.createModify();
},
init: function() {
this._super();
this.get('controller').addObserver('olMap', this.onMapCreated);
},
});
The view is added in a template related to a controller which has an olMap property.
I need to wait for the olMap property to be instantiated before doing some work in my view.
The code above is kind of working, except that the this referenced in the onMapCreated function is the controller's instance and not the view's instance.
I'm quite sure I am doing something wrong in my application's design. I would like to separate the concerns and get the drawing part outside of the main controller. Should I use a component? Not sure because it's not going to be reusable...
I would love to have some directions here.
After reading the manual in the API section, I came up with the solution. I post it here is someone needs it someday. Actually, all I had to do is add a parameter this to the addObserver method in order to change the context.
export default Ember.View.extend({
select: null,
modify: null,
createSelect: function() {
return new ol.interaction.Select();
},
onMapCreated: function() {
this.select = this.createSelect();
this.modify = this.createModify();
},
init: function() {
this._super();
this.get('controller').addObserver('olMap', this, this.onMapCreated);
},
});
Here is what I've ended up with:
My setup:
Ember : 1.10.0
Ember Data : 1.0.0-beta.16
jQuery : 1.11.2
Directory structure:
controllers:
map.js
map-draw.js
templates
map.hbs
map-draw.hbs
views
map.js
map-draw.js
in the template templates/map.js I use a render helper like this:
{{render "mapDraw" mapDraw}}
the renderer uses the controller controllers/map-draw.js and the view views/map-draw.js
content of the view map-draw.js:
export default Ember.View.extend({
templateName: "mapDraw",
classNames: ["map-draw"]
});
in the controller map-draw.js I am binding the map.js controller.
export default Ember.Controller.extend({
needs: ['map'],
olMap: null,
//...//
init: function() {
this._super();
this.get('controllers.map').addObserver('olMap', this, function(sender) {
this.set('olMap', sender.get('olMap'));
});
}
//...//
});
Related
so in the users/confirmation route, I am able to access that confirmation_token in the setupController hook
export default Ember.Route.extend(PresentsModalsMixin, {
setupController: function(controller, model){
this._super(controller,model);
controller.get('confirmation_token'); // token I want in query params is available here.
}
});
but in the view the confirmation token is no longer at this.get('controller.confirmation_token'')
export default Ember.View.extend({
templateName: 'users/confirmation',
actions: {
submit: function() {
this.get('controller.confirmation_token'); // null
this.get('controller').send('submit');
}
}
}
});
in the controller where the action goes, it is also no longer available
export default Ember.Controller.extend({
queryParams: ["confirmation_token"],
confirmation_token: null,
actions: {
submit: function() {
this.get('confirmation_token'); // null value
}
}
});
why is the query param getting blown away? and is there a way I can get it back
the template that is calling the view looks like this
{{render 'users/confirmation' currentUser}}
the correct answer is
{{render 'users/confirmation'}}
removing currentUser as the second argument and not passing any argument fixes this issue and allows you to keep the query params, it gets overwritten when you pass a second argument like this
{{render 'users/confirmation' currentUser}}
I have set up a view in ember and rendered it on the page like this
App.TestView = Ember.View.extend({
template: Ember.Handlebars.compile('<h1>Heading</h1>')
});
{{view App.TestView}}
But if I create the controller nothing happens
App.TestController = Ember.Controller.extend({
init: function() {
console.log('CONTROLLER HERE');
this._super();
}
});
Any ideas why this happens?
When you create a view manually (like you are doing) it doesn't use the test controller. If you hit a test route it will use the associated test controller and test view.
In your case based on your comments below you probably want to set up some routes and have them use the associated controllers and views.
Check out this: http://emberjs.com/guides/routing/defining-your-routes/
Maybe something like this
App.Router.map(function() {
this.resource('gallery', { path: '/gallery/:gallery_id' }, function() {
this.resource('photo', { path: 'photo/:photo_id' });
});
});
You are missing a route for your example to work: http://jsbin.com/IGIvuhe/2/edit
Add this and it will work:
App.Router.map(function(){
this.route("test", {path: '/'});
});
Hope it helps.
Something like document ready, but after all Ember views rendering
I am doing this right now with an override on ApplicationView didInsertElement, which seems to be working so far:
App.ApplicationView = Em.View.extend({
didInsertElement: function() {
// Do your magic.
}
});
I am wondering if this is the right way for an Ember document ready, or if Ember has a more native support for this simple and very common thing.
You can easily add a "post render" hook by reopening the base View class and adding it into the render queue.
Here's some code to show you how:
Ember.View.reopen({
didInsertElement : function() {
this._super();
Ember.run.scheduleOnce('afterRender', this, this.didRenderElement);
},
didRenderElement : function() {
// Override this in your View's
}
});
The didInsertElement is the right place, but if you want to be completely sure your render queue is completely flushed you could also listen to the afterRender event, something like this:
App.ApplicationView = Ember.View.extend({
didInsertElement: function() {
Ember.run.scheduleOnce('afterRender', this, 'processChildElements');
},
processChildElements: function() {
// do here what you want with the DOM
}
});
Hope it helps.
App.ApplicationView = Ember.View.extend({
afterRender: function () {
Ember.run.next(this, function () {
// This will run one time, after the full initial render.
});
}
});
My routing structure:
App.ready = function() {
App.Router.map(function() {
this.resource('contacts', function() {
this.resource('contact', function() {
});
});
});
}
Now in my contactsController I respond to and add action that transitions to the contact route. I would then like to call the add method on my contactController.
I have placed the needs: ['contact'] on my ContactController but then I get this message:
<App.ContactsController:ember197> needs controller:contact but it does not exist
When I use controllerFor (which is deprecated) I also get an error:
this.controllerFor('contact').add();
So Ember.js RC1 appears to only create the controllers (and other related instances) once one actually transitions to the appropriate route.
Is there a way around this.
So Ember.js RC1 appears to only create the controllers (and other related instances) once one actually transitions to the appropriate route.
Interesting - I had thought ember generated controllers earlier but guess not.
Is there a way around this?
Workaround is to define App.ContactController manually. Something like this will work:
App = Ember.Application.create({});
App.Router.map(function() {
this.resource('contacts', function() {
this.resource('contact', function() {
});
});
});
App.ContactController = Ember.Controller.extend({
add: function() {
alert('App.ContactController.add() was called!');
}
});
App.ContactsController = Ember.Controller.extend({
needs: ['contact'],
add: function() {
this.get('controllers.contact').add();
}
});
http://jsbin.com/osapal/1/edit
I am migrating my project from older version of EmberJS. In some places i used to get controller instance which is not related to the view, by using following in any view's init() method:
var controller = App.get('router').get('firstController');
But now this throws following error.
Uncaught TypeError: Cannot call method 'get' of undefined
This may be because it is not able to get the Router object. Now how to get controller instance which is not related to the view? or how to get the Router Object
The 'needs' feature allows a controller to access to other controllers, which allows a controller's view to access other controllers. (a good explanation of needs in Ember: http://darthdeus.github.com/blog/2013/01/27/controllers-needs-explained/)
As explained in Cannot access Controller in init function of View in 1.0.0rc, the controller property of a view is not yet set when init() is called, so you will need to access controller at a later time in the view's life cycle. This could be the willInsertElement() or didInsertElement() hooks, for example.
Here is an example demonstrating using needs access another controller from a view:
http://jsbin.com/ixupad/186/edit
App = Ember.Application.create({});
App.ApplicationController = Ember.Controller.extend({
doSomething: function(message) {
console.log(message);
}
});
App.IndexView = Ember.View.extend({
templateName: 'index',
init: function() {
this._super();
// doesn't work, controller is not set for this view yet see:
// https://stackoverflow.com/questions/15272318/cannot-access-controller-in-init-function-of-view-in-1-0-0rc
//this.get('controller.controllers.application').doSomething("from view init");
},
willInsertElement: function() {
this.get('controller.controllers.application').doSomething("from view willInsertElement");
},
clickMe: function() {
this.get('controller.controllers.application').doSomething("from clickMe");
}
});
App.IndexController = Ember.Controller.extend({
needs: ['application']
});