I have installed Ember Django Adapter(EDA) and I have followed the tutorial and in the template everything is ok but I'm not getting data from my api... but when my model its connect to the api I get the following warning in the console.
WARNING: Encountered "articles" in payload, but no model was found for model name "article" (resolved model name using frontend#serializer:articles:.modelNameFromPayloadKey("articles"))
This is my code:
app/application/serializer.js
import DRFSerializer from '../serializers/drf';
export default DRFSerializer.extend({
});
app/application/adapter.js
import DRFAdapter from '../adapters/drf';
import DataAdapterMixin from 'ember-simple-auth/mixins/data-adapter-mixin';
export default DRFAdapter.extend(DataAdapterMixin , {
authorizer: 'authorizer:django'
});
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('index');
});
export default Router;
app/models/articles.js
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
export default Model.extend({
title: attr('string'),
body: attr('string')
});
app/index/route.js
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.get('store').findAll('articles');
}
});
app/index/template.hbs
{{#each model as |article|}}
<article class="listing">
<h3>{{article.title}}</h3>
</article>
{{/each}}
You should use singular words when naming models, so change your model file to "article.js" and also change in route.js file to this.get('store').findAll('article');
Related
I have an ember.js toy application that I want to hook into a JSONAPI REST service for obtaining and displaying data. I can trace in my browser's developer console, that indeed, ember-data initiates the appropriate GET requests and receives proper, valid JSONAPI response bodies.
// ./app/models/person.js
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
email: DS.attr('string'),
birthdate: DS.attr('string')
});
// ./app/adapters/person.js
import ApplicationAdapter from './application';
export default ApplicationAdapter.extend({
pathForType() {
return "persons";
}
});
// ./app/adapters/application.js
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({
host: 'http://localhost:5000'
});
// ./app/router.js
import EmberRouter from '#ember/routing/router';
import config from './config/environment';
const Router = EmberRouter.extend({
location: config.locationType,
rootURL: config.rootURL
});
Router.map(function () {
this.route('persons', function() {
this.route('show', { path: '/:person_id' });
});
});
export default Router;
// ./app/routes/persons/show.js
import Route from '#ember/routing/route';
export default Route.extend({
model(params) {
return this.get('store').findRecord('person', params.person_id);
}
});
// ./app/routes/persons/index.js
import Route from '#ember/routing/route';
export default Route.extend({
model() {
return this.get('store').findAll("person");
}
});
// ./app/routes/application.js
import Route from '#ember/routing/route';
export default Route.extend({
});
// ./app/app.js
import Application from '#ember/application';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';
const App = Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver
});
loadInitializers(App, config.modulePrefix);
export default App;
// ./app/resolver.js
import Resolver from 'ember-resolver';
export default Resolver;
Unfortunately, when I want to use the model in my template, I can only access the element ids, and not the data attributes like name (Remains empty when rendered).
<!-- ./app/templates/persons/index.hbs -->
{{#each model as |person index|}}
<li>
Person {{person.id}} {{index}}
{{person.name}}
{{#link-to 'persons.show' person }}
Link {{index}}
{{/link-to}}
</li>
{{/each}}
I am a bit at loss for why this happens. Am I doing something wrong?
The posted code is fine, the attributes I was missing in the templates was actually missing from the HTTP responses.
Given a tag and post ManyToMany relationship defined as follow:
post.js
import Ember from 'ember';
import Model from 'ember-data/model';
import { hasMany } from 'ember-data/relationships';
export default Model.extend({
tags: hasMany('tag')
}
tag.js
import Ember from 'ember';
import Model from 'ember-data/model';
import { hasMany } from 'ember-data/relationships';
export default Model.extend({
posts: hasMany('post')
}
When adding tags to post using pushObject
let aPost = this.store.findRecord('post', 1),
aTag = this.store.findRecord('tag', 1);
aPost.get('tags').pushObject(aTag); // aPost is not commited yet
How to restore aPost.tags to its initial state?
So I've been beating my head against this for a few days now. I can't get my model data to render in the template at all. No errors are being thrown. Looking in the Ember Inspector, the Data tab shows my record loaded in tasks.
Any help much appreciated.
// app/adapters/application.js
import Ember from 'ember';
import FirebaseAdapter from 'emberfire/adapters/firebase';
const { inject } = Ember;
export default FirebaseAdapter.extend({
firebase: inject.service(),
});
// app/routes/tasks.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function(){
return this.store.findAll('task');
},
});
// app/model/task.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
description:DS.attr('string'),
date: DS.attr('date'),
created: DS.attr('string',{
defaultValue:function(){
return new Date();
}
})
});
// app/templates/tasks.hbs
<h2>tasks</h2>
{{#each task in model}}
<h2>{{task.title}}</h2>
{{/each}}
Ember Inspector:
View Tree:
tasks emtasks/templates/tasks <DS.RecordArray..> tasks --
Data:
task(11)
You are using a newer version of ember. Try this:
// app/templates/tasks.hbs
<h2>tasks</h2>
{{#each model as |task|}}
<h2>{{task.title}}</h2>
{{/each}}
I have a designed a app in ember.Now the app has feed page similar to fb and instagram.Now to get the username and his display pic, I have to send the request to "http://example.com/api/users/profile/?targetuser=-1" and the to get the user feed I have to make the requests to "http://example.com/api/feed".I am not able to figure out how to do it.
routes.js
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin,{
model(){
return Ember.$.ajax({
url: 'http://example.com/api/users/profile/?targetuser=-1',
headers:{
"Authorization":"token b0"
},
success:function(user_details)
{
console.log(user_details.full_name);
}
});
},
model(){
var inflector = Ember.Inflector.inflector;
inflector.uncountable('feed');
return this.store.findRecord('feed');
}
});
But in this case request is made only to "http://example.com/api/feed" and the ajax call is left.
I also want to store the data from both call to different store ,So that I can use it in hbs.
my models
feed.js
import DS from 'ember-data';
export default DS.Model.extend({
FeedResult: DS.attr(),
// gallery_name:DS.attr(),
// feedPhotos:DS.attr()
});
profile.js
import DS from 'ember-data';
export default DS.Model.extend({
results: DS.attr(),
photos:DS.attr()
});
Please suggest how should I do this so I can display the username,display pic and his feed on same page just like fb and instagram.
I've got a model like this:
import DS from 'ember-data';
var Post = DS.Model.extend({
title: DS.attr('string'),
downloads: DS.hasMany('download')
});
export default Post;
and would like to show the downloads-section only when there is at least 1 or more downloads in the post.
I tried introducing a computed property in the Controller but can't access the model from there.
What else can I do?
EDIT: Here's the controller showing you what I was trying to do:
import Ember from 'ember';
export default Ember.ObjectController.extend({
hasDownloads: function(){
console.log(this.get('downloads')) // <- undefined
return true
}.property('model'),
})
EDIT2: The Object-controller above has no route since it's rendered using `{{render "post"}}. This is an example-template.
<ul class="posts">
{{#with model as post}}
{{render "post"}}
{{/with}}
</ul>
That would be its route:
import Ember from 'ember';
export default Ember.Route.extend({
model: function(params) {
return this.store.find('post', params).then(function(posts) {
return posts.get('firstObject');
});
}
});
Directly access the property on your controller using model.downloads:
import Ember from 'ember';
export default Ember.ObjectController.extend({
hasDownloads: function(){
console.log(this.get('model.downloads'))
return true
}.property('model.#each'),
})
Depending upon which version of Ember you are using, the proxying behavior of the controller will no longer work. Also, change the property so that it is updated when downloads are added and removed.