I am trying to use Ember data with already built REST api. It works fine for top level routes, for example I have route for courses on api side like following:
app.get('/courses', app.controllers.courses.findAll)
app.get('/courses/:id', app.controllers.courses.findById)
Above works fine and I can easily get data with Ember Data. But problem arises with routes that have multiple levels. For example, courses can have multiple topics and topics can have multiple lectures so routes for them are defined like this on api side.
Topics:
app.get('/courses/:course_id/topics', app.controllers.topics.findAll)
app.get('/courses/:course_id/topics/:id', app.controllers.topics.findById)
Lectures:
app.get('/courses/:course_id/topics/:topic_id/lectures', app.controllers.lectures.findAll)
app.get('/courses/:course_id/topics/:topic_id/lectures/:id', app.controllers.lectures.findById)
So if I want to get all lectures inside a course I need to specify course id and topic id as well (not in the query but in url body, as you can see from url structures in backend api).
In Ember I have models for course, topic and lecture but I dont know how can I specify custom urls so that Ember Data can use those urls when I make requests.
One way could be to manually make ajax requests but this way records will not be populated in Ember Data Store.
Or I could have defined relationships between models in Ember but that would require changes on backend api also which is not an option for me.
So is there any nice way to solve this problem?
I am using:
Ember: v1.6.0-beta.2
Ember-Data: v1.0.0-beta.7
Avoid Ember Data, Ember works just fine without it.
If you really want to use it, make ajax calls then use store.pushPayload('type', data) to sideload the data into the store if you really want it in the store.
Related
I am working on a project where I need to develop frontend in angular 5 and backend business logic in laravel 5.4 with mySql Database. I am a newbie to this technology and dont know how to develop data flow connection between these two framworks.
It will be helpful if you tell me the easiest and most generic way to solve this out.
As with any other technology, you'll need to work with an API.
In your Laravel project:
Your Laravel project should have models, controllers and a file for the route paths for each method in your controllers, right? If you don't know where the routes are, there's a dedicated folder called "routes" at the root of your project.
Inside this folder, you'll have two important files: api.php and web.php. These two work exactly the same way, but the api.php will automatically add '/api' to the beginning of your route.
A route looks like a link, such as: "yourdomain.com/api/person/name/jondoe". Every route has to be accessed through an HTTP method, usually GET, POST, PUT or DELETE.
Example: let's say you need your user to see a list of people. You'll probably have a Person model and a PersonController containing some function called displayAllPeople(), and this function will select the people from your database. In your api.php file you'll add something like:
Route::get('/people', 'PersonController#displayAllPeople');
You can test that in your browser. Try to access http://yourdomain.com/api/people. You should see a JSON output of your function's return data. In this example, a list of people. Now all we have to do is make your Angular project call this API route.
Source: https://laravel.com/docs/5.7/controllers
In your Angular project:
Remember that Person model you created on your backend? Angular will access that model too, so you'll have to create a Person.ts model here. While that's not required to work, it's a good practice to create this model with the same attributes as the backend model.
Now you'll need a service. The service is a file that will access that Laravel route for you. If you're using Angular CLI, just run the command:
ng generate service person
That will create a person.service.ts file for you. Inside this file, you'll write all the functions to select people, update, save, delete people, and so on. Your function will look something like this:
findAll(): Observable<Person[]> {
return this.http.get<Person[]>('yourdomain.com/api/people');
}
Whenever you call the findAll() function, you'll access the Laravel route, which will return the People from your database. You can do that with any operation you want. Just make sure you follow the HTTP standards.
That also works if you want to send some data from your frontend to the backend, like if you want to save some new Person in your database. You'll need a POST call sending your new Person model which will be received by your Laravel's Controller function, and then persist it in the database.
Source: https://angular.io/tutorial/toh-pt4
In the app on which I'm working I use a REST API with
Angular 1 on the frontend. I use the extendModel function of Restangular in order to initialize the data that I receive. During the initialization phase I create a lot of cross-references and the object becomes cyclic. Here comes my problem. In order to put or post my data back to the server I have to either copy the object by picking just the fields that I need or I can work on the same object and delete all the references that I created and restore them when I get a response from the server. I feel like these 2 options kinda go head-to-head with the intended usage of Restangular. Is there a better way to do this?
I'm upgrading to ember-cli and ember 2.3. Say I have a model called User and a model called Post , and a user ...
posts: DS.hasMany('post', {async:true})
Now, this works the way I expect it to, lazily loading data and not loading posts unless it is required in either the .js or the template. So when I do
{{#each user.posts as |post|}}
{{post.title}}
{{/each}}
I get each post to render its title without a problem. However, in my server logs, I see this:
GET /posts/2
GET /posts/7
GET /posts/13
where the numbers are the post ids. This is to be expected, as when I return a user instance from the server, I return a list of the ids as the parameter 'posts'. So the user instance has:
...
'posts': '2,7,13'
...
in its data.
Now my question is this: way back when, when I used ember-data 1.0 (pre ember-cli and pre ember 1.13), I remember this call being made to the database instead for the same use case:
GET /posts?ids=2&7&13
or something along that line. I can't remember the exact format, but then, I could access the list of ids on the server side using this line of code:
var ids = req.query.ids.toString();
which gave me a comma separated list of ids (in string format). I would then convert this into the sql statement
SELECT * from posts where id in (2,7,13)
This SQL call was interpreted as a manyArray, I think, on the Ember Side and easily behaved as you would expect an Ember Array would.
How can I get this to happen again? I am quite confident that I am missing something and that I don't have to 'hack' ember-data; I would very much like to compress these calls into one instead of having an individual call to the database for each 'post'.
I should also mention that I am not looking to make {async:false} for these calls.
I think the thing you are looking for is coalesceFindRequests, this is a setting on your Adapter to tell Ember to bunch multiple requests that happen in the same runloop into one GET request as you had in the past.
You can see more detail here but essentially all you need to do is add the following to either your ApplicationAdapter (to enable it for all requests for all types) or to your posts adapter (so that it only affects the post requests)
Here is an example if you are using pod structure for your files (which I recommend)
// app/application/adapter.js
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({
coalesceFindRequests: true
})
I read many Backbone.js tutorials, but most of them deal with static objects.
Of course, I have data on the server. I want a tutorial that shows how backbone.js can communicate with the server to fetch data, post data, etc.
This is .sync, right? I read the backbone.js documentation, but still fuzzy on how to use this feature.
Or can someone show me an example?
According to: http://documentcloud.github.com/backbone/#Sync
Backbone.sync is the function that Backbone calls every time it
attempts to read or save a model to the server.
But when? Where do I put the function? I don't know how to use it, and the documentation doesn't give any examples. When does the data get loaded into my models? I get to define when...right?
You never really have to look at .sync, unless you plan to overwrite it. For normal uses, you can simply call model.save() whenever you want and that will execute a post or put (depending on whether the record exists already). If you want to get the data from your backend, use collection.fetch()
You'll of course also need to specify a URL, do so through your collection attribute, collection.url
You can override Backbones native sync functionality if you override it:
Backbone.sync = function() {
//Your custom impl here
}
After that this function is called whenever you call a backbone function like .save() on models or .fetch() on collections. You do not have to care about data transport anymore.
I would suggest taking a look into Backbones source and look how the default sync function is implemented. Then create your own or adopt your server to support the native function.
They are not free, but the following screencasts both have a piece on backend work and how to send data to and get data from Backbone.
Tekpub is a 9 part screencast about asp.net MVC3, with the whole 6th part about using backbone to write an admin module to manage productions. it shows all about handling routing in MVC3 and sending & receiving data
Peepcode
http://peepcode.com/products/backbone-js about basic backbone stuff
http://peepcode.com/products/backbone-ii about interactivity
http://peepcode.com/products/backbone-iii about persistance (it's this third one you will need for server connection information).
I have just begun to port a layered single page js app onto backbone.js and was trying to understand how to handle composite url parameters with routes and spalts in backbone.js. The backend has rails and sends JSON.
There are various entities (models) like filters, dimensions, features, questions which can be passed via request parameters.
URL 1
/display/#widget?id=42&fon=1,2,4&foff=6,9,19&q=1a2bc3abc4d
URL 2
/display/#widget?id=42&compare=345,567,90&fon=1,2,4&foff=6,9,19&q=1a2bc3abc4d
How to i structure these non-restful urls, keep the same functionality and allow bookmarkability.
Thanks
Backbone's router, for the purpose of invoking views, cares only about the hash portion of window.location. However, it does keep track of the search portion for the purpose of maintaining the browser history.
Therefore, the decision about bookmarkability is your responsibility: the hash will invoke a specific route, and what views that route hides or shows is up to you. How those views parse the search string and react is also up to you.
I can see what you want to do: change a model through the search function, then render it. It's a bit of a two-step trigger: hash-change -> model-sync -> show-view. Structuring that sounds like it'll be fun. But Backbone is capable.