Using JSON Api URL EmberJS - javascript

I normally get data from a service I created, a hard-coded JSON. But I need to take the JSON from an URL.
This is my twiddle :
https://ember-twiddle.com/b9cd8b1b3418d876f88235c4aa99e268?openFiles=templates.pic.hbs%2Ctemplates.components.image-list.hbs14
How can I add a URL as a source instead of calling it from the service 'pics'? I tried something but got errors and couldn't do anything. I'm very new at this.
I tried
model() {
return $.getJSON('/my-url');
}
But I get this error :
Mirage: Your Ember app tried to GET 'my URL', but there was no route defined to handle this request. Define a route that matches this path in your mirage/config.js file. Did you forget to add your namespace?
I totally had no idea about the error because I don't use mirage, I created it yeah but didn't use in any part of the project.
Then I tried :
import Ember from 'ember';
export default Ember.Route.extend({
model() {
this.get('my Json url', () => {
return [];
});
}
});
Now chrome's devTool doesn't give any error but all I see is a blank-page. Is this all wrong or is it something about the .hbs files?
Any ideas?Thanks!

Uninstall ember-cli-mirage and go back to:
model() {
return $.getJSON('/my-url');
}

I figured what the problem was with some help :
Solution:
In my index.js, I should have used
{{image-list model=model.Data currentPos=currentPos }}
instead of
{{image-list model=model currentPos=currentPos }}
Also, I don't need any model/*.js because I get the model() from IndexRoute so I deleted those files. Thanks

Related

error while using params in the router.push function vue-router 4

hello guys i'm new to vue js and i'm trying to pass paramenters to a specific router this should happen when i click on a card research and then it will redirect to the research details component called actions-log but when i call this router via
this.$router.push({ name: "actions-log", params: { Id: "3" } })
it gives me an error in the console says:
Uncaught (in promise) Error: No match for {"name":"3","params":{}}
so can any one help me with that error please......
You can use path
const routeId = 3
this.$router.push({ path: `/actions-log/${routeId}` })
i figured out what's happening i have a component called pageTitle this component is included by every other component i use it to make the breadcrumb using the:
this.$route.fullPath
then spliting it and looping the values with :
<li><router-link></router-link></li>
to make the breadcrumbs links but the fullPath prop of the vue router it returns the params too so through the loop in:
<router-link :to="{ name: {path} }">{{ path }}</router-link>
vue checks if the router is exists with the given name, for example when i put /actions-log/3 as params int the url it will be set in the :to attribute becuase of this behavios it's launch that exception;
so i think i solved the problems in the following computed fuction :
i don't know if someone has a better idea to create a breadCrumbs in vue...
anyway thank you so much for helping me to resolve this problem.

How to call Loopback4 controller's method from another controller

I have a loopback 4 controller with a function that I don't want to expose via HTTP. I would like to be able to call the function from another controller.
How can I do this? Is there any way of injecting a controller in another controller?
(I 'm able to inject repositories in controllers, but not controllers in other controllers).
You have to first import repository of another controller e.g.
import { MemberRepository, EmailTemplateRepository } from '../repositories';
then you have to inject it in constructor like this:-
#repository(EmailTemplateRepository) public emailTemplateRepository: EmailTemplateRepository,
then after you can use any function of controller like this:-
const template = await this.emailTemplateRepository.findOne({
where: {
slug: 'user-password-reset',
status: 1
}
});
Answer is here: https://github.com/strongloop/loopback-next/issues/3028
#inject(‘controllers.AnotherController’) c: AnotherController
Ok I figured out how to make this work. You have to import the #repository component where the rest of the other import statements are, like so:
import { repository } from '#loopback/repository';
Adding this, will allow for, #repository(EmailTemplateRepository) public emailTemplateRepository: EmailTemplateRepository, to work.

EmberJS 2 route dynamic segment in not nested routes undefined

Really new to ember and trying to setup basic (in my mind) routes.
I have calendars resource and I want to display individual calendars.
My app/router.js has the following:
this.route('calendar', {path: 'calendars/:calendar_id'}, function () {
this.route('show');
this.route('edit');
});
this.route('calendars', function(){
this.route('create');
});
Folders are as following:
app/routes: [
calendars: [create, index],
calendar: [edit, show]
]
app/templates: [
calendars: [create, index]
calendar: [edit, show]
]
In app/routes/calendar/show.js:
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.store.findRecord('calendar', params.calendar_id);
}
});
Problems start when I go to http://SERVER/calendars/5/show (5 is a :calendar_id part, SERVER is what hosts ember app) :
when I log params - they are undefined
In dev tools I see that Ember somehow makes a POST request to my server as http://SERVER/calendars/5
(a :calendar_id part, SERVER is on same domain and where my back-end resides).
This happens regardless if I comment out model() function in app/routes/calendar/show.js file.
Apparently Ember knows what calendar_id to use for that request.
But I don't know where that call to the server happens:
If I comment out model(){} altogether, my template renders model record (the calendar record that Ember fetches).
If I on the other hand try to log params in model() and I comment out this.store.findRecord part out, the params are undefined and it raises an error.
I thought at first that it is my DS.RESTAdapter since I have defined updateRecord changes to fake PUT request (my server does not allow that), but I commented out the whole file and it still does this query.
I've cleaned both dist/, tmp/, upgraded to 2.9.0, but it does the same thing.
I have no controllers defined
How does Ember make POST request if model() hook is missing from route, I have no controllers difined. Also how do I fix it so that it works? ;p
Edit [2]:
I am trying this now and I think it kinda works, but looks ugly:
this.route('calendars',{ path: '/calendars'}, function(){
this.route('create');
});
this.route('calendar', { path: '/' }, function () {
this.route('show', { path: '/calendars/:calendar_id/show' });
this.route('edit', { path: '/calendars/:calendar_id/edit' });
});
this.route('index', { path: ''});
Ember is smart enough to generate a default route if you do not create one, and a default model if you do not create a model function.
It does this based on the routes name ie if your route is "calendar" it generates a model function based on the "calendar" model.
Try explicitly define your route path with the parameters as per ember docs:
https://guides.emberjs.com/v2.9.0/routing/defining-your-routes/
this.route('calendar', function () {
this.route('show', { path: '/:calendar_id/show' });
this.route('edit', { path: '/:calendar_id/edit' });
this.route('create');
});

How to structure Meteor app and load into Meteor shell

I'm having a number of issues putting together a very simple piece of code as I learn Meteor. See the comments, which are questions.
server/main.js
import { Meteor } from 'meteor/meteor';
import { Post } from './schema'
// Why is this required to make Post available in Meteor.startup?
// Isn't there auto-loading?
Meteor.startup(() => {
console.log(Post)
// This works, but why isn't Post available to meteor shell?
});
server/schema.js
import { Post } from './models/post'
export { Post }
server/models/post.js
import { Class } from 'meteor/jagi:astronomy';
// Why can't this be imported elsewhere, like main.js?
const Posts = new Mongo.Collection('posts');
const Post = Class.create({
name: 'Post',
collection: Posts,
fields: {
title: { type: String },
userId: String,
publishedAt: Date
},
});
export { Post }
In addition to these questions, how can I load my app into meteor shell? Post is undefined there, even though it's defined in Meteor.startup. I tried using .load with an absolute path, but this breaks my app's imports, which use relative paths.
As for which errors I'm confused about:
When I try and use import inside Meteor.startup(), I get an error that the keyword import is undefined. I'm using the ecmascript package.
When I don't import { Class } in the same file where I use Class, I get an unknown keyword error.
If I don't import { Post } in main.js, then Post is undefined.
Not able to load app into Meteor shell.
To access exported objects in Meteor shell, use require:
> require('server/schema.js').Posts.findOne();
To access objects exported by packages, use the package name:
> require('react').PropTypes;
The reason you can't access an object that's imported by another js file is that each file has its own scope here. When Meteor builds your app, it doesn't just concatenate js files like many other build systems do, and that's really a good thing.
Basically a Javascript object gets created for every js file you write. Anything you export in a js file becomes a field in this object which you can access by using require. And import is just a nicer version of the same thing.

Ember, JSONAPIAdapter, JSONAPISerializer, findAll not available

Im building an Ember app "ember-cli": "2.4.3", sitting on Laravel/Lumen and cant seem to get the wires hooked up correctly. Im trying to also an API server JSON-API compliant, so I have access to alter the syntax if thats a problem.
If I remove the export default DS.JSONAPISERIALIZER, I get ember.debug.js:32116 TypeError: typeClass.eachTransformedAttribute is not a function
With it, I typically get Assertion Failed: You tried to load all records but your adapter does not implement findAll
If I call getJSON(...) from within the route, instead to calling the store for the data, it works perfectly, and displays to the view as expected.
I have tried other adapters but I think that being JSON-API compliant I need to use the JSONAPIADAPTER. Any help would be awesome.
application.js
import DS from "ember-data";
export default DS.JSONAPIAdapter.extend({
namespace: 'v1',
host: 'http://edu-api.app:8000',
});
export default DS.JSONAPISerializer.extend({
//in preparation of underscores in returned data
// keyForAttribute: function(attr) {
// return Ember.String.underscore(attr);
// },
// keyForRelationship: function(attr) {
// return Ember.String.underscore(attr);
// }
});
skill.js
import DS from 'ember-data';
var App = window.App = Ember.Application.extend();
var attr = DS.attr;
App.Skill = DS.Model.extend({
name: attr("string"),
desc: attr("string")
});
index.js
export default Ember.Route.extend({
model() {
//return this.store.findAll('skill'); //<- Assertion Failed: You tried to load all records but your adapter does not implement `findAll`
this.get('store').findAll('skill'); //<- Assertion Failed: You tried to load all records but your adapter does not implement `findAll`
//return Ember.$.getJSON('http://edu-api.app:8000/v1/skills'); //<- works, and properly displays data to view
}
});
I think you primary have problems understanding ember-cli.
First you don't put your adapter and serializer in the same file. Maybe use the generators to get a default file like ember generate serializer application.
Your application serializer goes to app/serializers/application.js, your adapter to app/adapters/application.js.
Next this line looks really really wrong:
var App = window.App = Ember.Application.extend();
This creates a new app, but you should do this only once in your app/app.js. Next you use a global export, what you should never do in an ember-cli app.
To specify your model you need to locate your file under models/skill.js. There you don't attach your new Model to a global exported App like App.Skill = DS.Model.extend({, but you export it as default export like export default DS.Model.extend({.
Your index.js looks right if its located under routes/.
I strongly recommend you to read more about the ember resolver, and the ember dependency injection framework which do all this magic for you. Also use the generators to get your files, it can help you to place your files right.

Categories