I have simple Ember app with Ember Data (powered by Rails). I have created these routes:
App.Router.map(function () {
this.resource('bands', function () {
this.route('new');
this.resource('band', {path: ':band_id'}, function() {
this.route('edit');
});
});
});
Then, when I go to http://localhost:3000/#/bands/23/edit, I'd like to see the values of the object with ID 23, like this:
<div>name: {{name}}</div>
{{! should output "name: Pavel" }}
However, when I put that code into band/edit.hbs, the application displays only "name: ", without any value. I have figured out it's because the content is not passed to the inner view. When I put the same piece of code directly to band.hbs, everything works as expected. Where am I doing a mistake? How can I pass the content object to the controller? (If possible, I'd like to have generated as much controllers as I can).
You will have to at least define the the route for BandEdit:
App.BandEditRoute = Ember.Route.extend({
model: function(params) {
return this.modelFor('band'));
}
});
If you need to you could always add the model to a transaction before returning it.
You could also do this by referencing the parentController from within the BandEdit Controller, but that seems like it would be a less elegant way to solve this.
It's because the context has been changed by your inner view (the context will now be the view itself), but the view will have access to the BandEditController and its associated model, so if you always reference the model first then Ember will know what you're after: {{model.name}}/{{model.genre}}.
See JSFiddle: http://jsfiddle.net/JZ84L/
(Use in conjunction with Andre's answer, because if you're not even passing through the model to your outlet then it's unusable.)
Related
I am just starting with ember and trying to do a simple test.
Which, also very simple, got me stuck for some reason and I cant find the answer anywhere.
So I need load data from the server without transition to another route and do it from within a submit action (or any other action for that matter).
I have a simple input form where I type in manually an object ID and
I want it to be loaded say right underneath. Simple enough. Seams to be a three minutes job in angular. Here, I just cant get the hang of communication between route and controller.
So given this little emblem
form submit="submit"
= input type="text" value=oid
button type="submit" Submit
#display
= person
And this route
import Ember from 'ember';
export default Ember.Route.extend({
model: {
person: null
},
actions: {
submit: function() {
var oid = this.controllerFor('application').get('oid');
var person = this.store.find('person', oid);
this.modelFor('application').set('person', person);
}
}
});
This is as far as I could think. I want to click submit with ID of an object and I want that object loaded and displayed in the div#display.
So what am I doing wrong? What is the right way to do it?
First, I don't even know where to put such an action? Controller or route?
If I put it in controller, I don't know how to refresh the model. If I put it in route, I am stuck with the above. Would be also nice to see how to do it if action was placed in the controller.
For simplicity I just do it all in application route, template, controller ...
Thank you
The best place to put your code is on Controller given it responds to UI, so doing that on your controller the code is much more simple.
On this jsfiddle I have put some dummy code which tries to do something what you want to achieve.
//Index Route
App.IndexRoute = Ember.Route.extend({
model: function () {
return ['red', 'yellow', 'blue'];
}
});
//Here my dummy controller.
App.IndexController = Ember.Controller.extend({
oid: 1,
actions: {
submitAction() {
//Here your logic to find record given the input and attach
//the response to the model object as UI is binding to model
//if you add/remove new records they will show up.
//On this example I have added a new object.
this.get('model').addObject('green');
}
}
})
Enjoy!
I am on a page where I can see a specific customer, part of my router.js is:
this.route('customers');
this.route('customer', {path: "customers/:customer_id"});
this.route('customer.order.create', { path: "customers/:customer_id/order/create" });
customer.order.create needs to load in my main view and so is not nested. An order 'has a' customer.
I've setup my /customer/order/create controller to have
needs: "customer"
I want to access the customer in my /customer/order/create.hbs template like this:
<h3>New Order for {{controllers.customer.name}}</h3>
When I end up creating the order I will also want to set newOrder.customer = customer.
customer.hbs links like so
<div>
{{#link-to 'customer.order.create' model}}Create Order{{/link-to}}
</div>
Currently {{controllers.customer.name}} renders nothing, what piece of the puzzle am I missing to get to the customer in my order/create route?
Or putting it more generally, what route/controller/etc code do I need when I have a parent object which belongs to my child object in a /parentObject/parent_id/childObject/create type scenario.
There are many points to fix:
1) {{controllers.customer}} is Controller Object, {{controllers.customer.name}} it's name property. I think you want {{controllers.customer.model.name}}.
2) "..newOrder.customer = customer.." should be
newOrder.set('customer', this.get('controllers.customer.model'));
3) your customer.order.create route model hook shoudn't be empty, since you are using dynamic segment customer_id:
//route
model: function(params) {
return this.find('customer', params.customer_id);
}
4) Your routes are not nested, so {{controllers.customer.model.name}} would be empty if your customer route is not activated. So you should use: {{model.name}} instead of {{controllers.customer.model.name}}
When you click link you passes model directly, and model hook is not fired, so all looks good. When you visit url directly, model hook is fired. If it is empty you will see nothing.
General concept: it is dependancy injection concept, you could read here: http://guides.emberjs.com/v1.12.0/understanding-ember/dependency-injection-and-service-lookup/
You should be able to get the customer from the store. Give the following code a try:
The route:
export default Ember.Route.extend({
model: function(params) {
return Ember.RSVP.hash({
customer: this.store.find('customer', params.customer_id)
});
}
});
The controller:
export default Ember.Controller.extend({
customer: Ember.computed.alias('model.customer')
});
And it should be directly accessible as customer in your template, like so:
<h3>New order for {{customer.name}}</h3>
I changed needs: "customer" to needs: ["customer"] and then used {{model.name}} in my template. Seems that needs requires an array of strings and not just a string, after I fixed that Ember took compare of the rest without the need to create a /customers/order/create.js route.
For a more complete answer see Artych's answer if you don't want everything taken care of.
I am using ember-cli and there is one controller which gets using a render helper and hence no route. Example
{{render 'ref-type' ref-type}}
Now inside the controller ref-type
export default Ember.Controller.extend({
actions{
isShown: function() {
var m = this.get('model'); //here model is undefined can i know why?
}
}
});
and model ref-type is
export default Ember.Object.extend({
getData: function(){
return 'xyz'; //data is returned hre
}
});
why am i not able to access model in the controller.
Adding a raw JSBin example
JSBIN
Should the model always be DS.Model.extend? i do not think so.
Also Instead of ref-type i have used 'sample' as the name, so that it is easier to understand
You never initialize your model. According to your JSBin example you must have property named sample in your TodosController. ember will not create an object by itself. I have edited your JSBin. It might not be the best approach but I tried to explain what is going on.
If you put log {{log sample}} just above your render helper you will notice that your sample property is already undefined.
Working hard on my Ember app here, and it's going along fine. However, I've run into an issue of unexpected behaviour and I'm not sure regarding the best approach to this problem.
The problem is that in a specific route, I want to render another route into another outlet. However, the other route that I render into the other outlet doesn't retain it's own model.
If I do this:
App.TestRoute = Ember.Route.extend({
model: function() {
return {
heading: "Test",
testContent: "This is test."
}
}
});
App.IndexRoute = Ember.Route.extend({
renderTemplate: function() {
this.render("test", {
outlet: "left"
});
this.render({
outlet: "right"
});
},
model: function() {
return {
heading: "Index",
indexContent: "This is index."
}
}
});
... and access the IndexRoute, I would expect the TestRoute's model to be rendered into the TestRoute's template, but only the IndexRoute's model is relayed to both templates.
Fiddle here:
http://jsfiddle.net/3TtGD/1/
How do I allow Ember to use the default model for a route without having to expressively merge them? It seems tedious.
Also, having the same name of some model properties, like {{heading}} is desirable, but not necessary.
What's the best approach for solving this issue?
Thank you for your time.
Best regards,
dimhoLt
In the renderTemplate method you're telling Ember to render a template inside an outlet but it will just default the controller to the one managing the route. Given it's the controller handling the route it makes sense that it manages all the templates within that route.
Of course you can specify a different controller using:
this.render("test", {
outlet: "left",
controller: 'test'
});
it can in turn be a controller you already instantiated (and maybe set its content):
var testController = this.controllerFor('test');
testController.set(....)
this.render("test", {
outlet: "left",
controller: testController
});
About using the model: You can call this.modelFor('test') inside the route and it will return the model of the test route (it even knows if it has already been resolved). I usually do this when I need to access the model of one of the parent routes.
I believe it makes sense to access the model of a parent route, but not so much if you're accessing the model of an unrelated route. Why don't you want to merge both models?
The app I am working on has an Event-page where users see Events from themselves and friends as well as being able to use an inline event-creator (to create events, on that very same page/route).
To be a bit more precise, the events get all loaded and displayed in a newsfeed style, which works perfectly fine but the problem now is when trying to save a new event-model. I think some code will make this easier to understand.
The routes:
this.resource('newsfeed', function() {
this.route('personal');
this.route('whatever');
});
then in NewsfeedIndexRoute the app has
model: function() {
return App.Event.find();
}
for displaying all Events with an ArrayController at /newsfeed. That works fine.
Furthermroe the app has a NewsfeedRoute and Controller as well so the event-creator is accessible on all sub-routes and for saving an Event we have the following code:
App.NewsfeedRoute = Ember.Route.extend({
setupController: function(controller){
controller.newRecord();
}
});
App.NewsfeedController = Em.ObjectController.extend({
newRecord: function() {
//The following line works but makes the API 'dirty' and an extra model needs to be created
this.set('content', App.Newsfeed.createRecord({title: "new title"}));
//The next line would be preferred, but overrides the displayed models at /newsfeed
//this.set('content', App.Event.createRecord({title: "new title"}));
},
save: function() {
this.get('model').save();
}
});
So the problem now is, when I go to /newsfeed and use the line this.set('content', App.Event.createRecord({title: "new title"})); it overrides everything that gets displayed in the newsfeed/index.hbs template with that one model (so just displaying 'new title'). And when you type in more into the even-creator that gets displayed as well. This is obviously not the behaviour we want. Ideally it should just be separated somehow, then get saved to the Server.
The other line you can see with the Newsfeed model is a work-around and it works fine, but as mentioned in the comment it feels really like a hack and also makes the API kinda dirty, because using the /events endpoint with a POST request would be much more RESTful.
So does anyone have any idea, if there is any way to achieve that right now with ember-data?
There are many ways to accomplish this in ember. Seems like you are pretty close to a good solution but what's missing in this case is an EventController. It should look a lot like what you'd had in App.NewsfeedController.
App.EventController = Em.ObjectController.extend({
newRecord: function() {
this.set('content', App.Event.createRecord({title: "new title"}));
},
save: function() {
this.get('model').save();
}
});
Now in your template, use the {{render}} helper to add the
{{render event}}
And define a event.hbs template.