I am very new to ember.js.
I have the following code which I need to change to retrieve data from the server using multiple models (using multiple JSON/RESTful calls).
This (single model version) WORKS:
In app/routes/index.js:
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.get('store').queryRecord('wallet', {balance: true});
}
});
and in wallet-balance.hbs:
<div>Your Total Score: {{wallet.balance}} </div>
I changed to this and it WORKS:
import Ember from 'ember';
import RSVP from 'rsvp';
export default Ember.Route.extend({
model() {
return RSVP.hash({
wallet: this.get('store').queryRecord('wallet', {balance: true})
});
}
});
and in wallet-balance.hbs:
<div>Your Total Score: {{wallet.wallet.balance}} </div>
BUT if I change to the following ("wallet" -> "anythingelse"), it WON'T WORK:
import Ember from 'ember';
import RSVP from 'rsvp';
export default Ember.Route.extend({
model() {
return RSVP.hash({
anythingelse: this.get('store').queryRecord('wallet', {balance: true})
});
}
});
and in wallet-balance.hbs:
<div>Your Total Score: {{anythingelse.wallet.balance}} </div>
I'm trying to understand why. Where is it picking up from for the definintion "wallet" - and why changing to "anythingelse" won't work? Where else is the code for "wallet" referring to?
Components are isolated from their surroundings, so any data that the component needs has to be passed in. so you need to understand how to pass properties to component.
I assume, in all the above three examples you are including wallet-balance component like this.
{{wallet-balance wallet=model}}
If you want to make {{anythingelse.wallet.balance}} this one work for 3rd example, then you need to include the component like {{wallet-balance wallet=model.anythingelse}}
For debugging in template hbs file, you can make use of log helper, like {{log 'model object' model}} this will print model object in console.
Here is the reasoning behind the screen,
Whatever is returned from model hook will be set in corresponding controller's model property by default through setupController hook method.
In your case, you didn't override setupController so default behavior is applicable.
return this.get('store').queryRecord('wallet', {balance: true});
queryRecord will return Promise and it will be resolved to single record wallet and it will be set in controller's model property. now model is equivalent to single wallet record object. you can access it in template `{{model.balance}}
return RSVP.hash({
anythingelse: this.get('store').queryRecord('wallet', {balance: true})
});
queryRecord will return Promise and it will be resolved to single record wallet and it will be set in inside the object {anythingelse:walletRecord} now model is equivalent to {anythingelse:walletRecord}. you can access it in template like {{model.anythingelse.balance}}
You need to set your model in setupController().
import Ember from 'ember';
import RSVP from 'rsvp';
export default Ember.Route.extend({
model() {
return this.get('store').queryRecord('wallet', {balance: true});
},
setupController(controller, wallet) {
controller.set('wallet', wallet);
}
});
Hope this helps.
Related
I am building a Ember Application where I fetch a feed of Debate objects from an API end point in a route, via the following ajax call:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
$.getJSON("http://localhost:3000/api/v2/debate_feed").then(debates => {
store.push(debates);
});
}
});
Upon receiving the Debate objects I need to save them to the data store, the problem is I can not access the Ember Data store after the ajax call is complete. When I try to access the store I get the following error:
Uncaught ReferenceError: store is not defined(…)
Any ideas what the issue is?
store is not defined in the Route. You can this.get('store') to get store object. You can try the below code.
import Ember from 'ember';
export default Ember.Route.extend({
beforeModel(transition) {
return Ember.$.getJSON("http://localhost:3000/api/v2/debate_feed").then(debates => {
this.get('store').push(debates);
});
},
model: function() {
return this.store.peekAll('debate');
}
});
But the preferred approach is,
1.Define debate model model guide
2.Define Adapter - JSONAPIAdapter or RESTAdapter.adapter guide
3.Implement API end point for GET request /debates
then you can just simply say this.store.findAll('debate') this will fetch and update it to store.
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.findAll('debate');
}
});
It should be this.store.push(...), but you really should implement the ajax call with an adapter! Also notice that the model will be empty, because you return nothing. If you want to have the model do return this.store.push(...).
Pretty new to Ember so maybe someone can help me out. I keep running across this error and have no idea how to solve it.
Ember : 2.5.1
Ember Data : 2.5.3
Below is my router.js.
//app/router.js
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('organization', {path: '/organization/:id'}, function(){
this.route('about', { path: '/about' });
this.route('admin', { path: '/admin' }, function(){
this.route('team', { path: '/team/:team_id' });
});
});
});
The organization/:id/about and organization/:id/admin routes work fine. But when I try to load the organization/:id/admin/team/:team_id route, the error is thrown. Below is the routes/organization/admin/team.js file:
//app/routes/organization/admin/team.js
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
let organization = this.modelFor('organization');
return organization.get('team');
}
});
Not really sure what other information I should post, so please ask for any additional information you may think is necessary to help debug. My guess is it's something pretty simple and I'm completely oblivious to it.
EDIT
I've added a couple more files to help diagnose the problem:
//app/routes/organization.js
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.store.findRecord('organization', params.organization_id)
}
});
//app/routes/organization/admin.js
import Ember from 'ember';
export default Ember.Route.extend({
actions: {
changeValue(){
this.currentModel.save();
}
}
});
Where currentModel is the model for the organization route. I've removed the organization.admin.team model hook for now and am just testing a
{{#link-to 'organization.admin.team' model.team.id}} Team {{/link-to}}
in a component rendered in the organization.admin template where I pass model=model. But now I get the same error (Assertion Failed: You need to pass a model name to the store's modelFor method) in the Javascript console when rendering the organization.admin template.
If you pass Object to {{#link-to}} helper. It skips the model hook. So you could basically send {{#link-to 'team' organization.team}}Without having to write "model" hook.
"It makes sense and it might save a request to the server but it is, admittedly, not intuitive. An ingenious way around that is to pass in, not the object itself, but its id" - https://www.toptal.com/emberjs/the-8-most-common-ember-js-developer-mistakes".
So you should do
hbs
{{#link-to 'team' organization.team.id}} Link to team management {{/link-to}}
route
model(params) {
return this.store.findRecord('team', params.team_id)
}
you can use modelFor('parent') method to get organization model.
like that
//app/routes/organization/admin/team.js
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
let organization = this.modelFor('parent');
return this.store.findRecord('team', params.team_id)
}
});
i think you wants to do something like that.
basically ember does not support nested routes.
I'm trying to use setupController method to pass some data to the controller from the route and it only works if the controller is a singleton.
The setupController method is called in both situations but the variables are only set on the controller if it's a singleton.
How can I pass data from a route to a transient controller?
Here's a twiddle:
http://ember-twiddle.com/ba55734e925664e363f4
Uncomment/comment the following line to toggle between singleton/transient:
//application.register('controller:application', 'ApplicationController', { singleton: false });
I have not been able to find any information about whether or not this should work. I'm using Ember 1.13.6.
controllers/application.js:
import Ember from 'ember';
export default Ember.Controller.extend({
appName:'Ember Twiddle'
});
initializers/application.js:
export function initialize(container, application) {
//application.register('controller:application', 'ApplicationController', { singleton: false });
}
export default {
name: 'application-init',
initialize: initialize
};
routes/application.js:
import Ember from 'ember';
export default Ember.Route.extend({
setupController: function(controller,model) {
this._super(controller,model);
controller.var1 = "Variable 1";
}
});
templates/application.hbs:
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{var1}}
<br>
This appears to be an actual bug, since the instance of the controller is different from the instance you have in setupController and the one backing the view.
A workaround would be overriding the renderTemplate hook on your route to pass the instance of the controller versus a string reference which is looked up by default (and creating a new instance of the controller!).
export default Ember.Route.extend({
setupController(controller, model) {
this._super(...arguments);
controller.set('var1', 'foo');
},
renderTemplate(controller, model) {
// note: don't call super here
this.render('application', {
controller: controller,
model: model
});
}
});
I'm trying to set queryParams in an Ember controller, but they don't seem to be updating the URL at all.
I have this abbreviated mixin being applied to the route:
import Ember from 'ember';
import ControllerPaginationMixin from './controller-pagination';
export default Ember.Mixin.create({
setupController(controller, model) {
this._super(controller, model);
controller.reopen(ControllerPaginationMixin);
}
});
And here's the abbreviated controller mixin that is applied above:
import Ember from 'ember';
export default Ember.Mixin.create({
sortKey: null,
queryParams: ['sortKey'],
actions: {
sort(key) {
this.set('sortKey', key);
}
});
When I call the sort method from a component, I can see in the Ember Inspector that the sortKey property has been changed to the correct new value, but the URL remains unchanged. Am I missing something?
Your problem is that you're trying to customize the controller class at the runtime.
You will reopen the controller every time a user visits the route, that's ridiculous.
Simply extend the controller definition with the mixin and you're good to go.
I'm build a list-view, which renders a list of records in a table. The list-view is build as a reusable mixin, and has a reusable template as well. I want the list-view to be as easy to use as possible, and not have to write too much code, to make it work - but only overwrite what I want to change.
Idealy I only want to tell the controller (or perhaps even better) the router, that it's going to render a list-view, and only render custom template, if I have one defined.
Example:
import Ember from 'ember';
import MixinList from '../../mixins/mixin-list';
export default Ember.Route.extend(MixinList, {
model: function() {
return this.store.find('category');
}
});
Currently I have to write this code, to make the list-view work:
Categories route:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.find('category');
}
});
Categories controller:
import Ember from 'ember';
import MixinList from '../../mixins/mixin-list';
export default Ember.Controller.extend(MixinList, {
actions: {
itemAction: function(actionName, item) {
if (actionName === 'edit') {
this.transitionToRoute('categories.edit', item.get('id'));
}
}
}
});
Categories template:
<h1>Categories</h1>
{{partial 'mixin-list'}}
Is it possible to setup conventions, so routes which are using a specific mixin, are given a default controller and template, if they arent added to the project by the user?
After some further research (and some fresh eyes), I found the solution:
import Ember from "ember";
export default Ember.Mixin.create({
renderTemplate: function() {
var currentController = this.container.lookup('controller:' + this.routeName);
if (currentController.isGenerated) {
currentController.reopen(MixinList);
this.render('mixin-list-view');
}
else {
this.render();
}
}
});
That allows me to only define the route, and include the mixin, and let that mixin do the magic:
import Ember from 'ember';
import MixinList from '../../mixins/mixin-list';
export default Ember.Route.extend(MixinList, {
model: function() {
return this.store.find('category');
}
});
The important part here, is the renderTemplate method, and the lookup to the currentController. The currentController exposes a property, that tells if it's autogenerated (not explicitly created by the user). In that case, we can overwrite the rendered template, and even add functionallity to the controller - for example by adding a mixin to the controller (.reopen(...)).