Refresh model from JSON - ember.js

I have a deeply nested model with one-to-one and one-to-many relationships. Initially I retrieved this model from server using standard ember-data API.
What I need to do now is to update model (and all its relationships) from a plain JSON retrieved by an AJAX call.
I cannot use reload() method, because that would make an additional HTTP request - I already have the JSON payload, so no need for an extra HTTP request.
Is there a way to reload a model from JSON?

You can use pushPayload/push for to add new records and update the existing records in store.
To revert all old changes, You can get all the records from store by peekAll, and iterate it for hasDirtyAttributes, if its true then unload it from store. after that you can use pushPayload to update the incomind records into store.
let allRecords = this.get('store').peekAll('modelname')
let dirtiedRecords = allRecords.filterBy('hasDirtyAttributes',true);
dirtiedRecords.forEach((item) =>{
item.unloadRecord();
});
//after that you can use pushPayload the result you got it from Ajax call.
Refer:
https://emberjs.com/api/data/classes/DS.Model.html#property_hasDirtyAttributes
https://emberjs.com/api/classes/Ember.Enumerable.html#method_filterBy
https://emberjs.com/api/data/classes/DS.Store.html#method_pushPayload

Related

Change the edit url, dynamically using the Datatable Editor

I'm looking on how to update the ajax configuration dynamically using data from a resource when updating a record. Django REST expects the id at the end of the url and the request method must be type PUT
I've spent some time figuring out how to update the ajax request made by the Datatable Editor plugin. I'm using Django Rest as the backend. This might be useful for some people looking for a similar answer.
Technically you can update the ajax options if the editor object before it sends the request by using the preSubmit Event.
editor.on('preSubmit', (e, request,) =>{
let _url = new URL(window.location.origin + "/" + editor.ajax().url)
if(request.action == 'edit'){
editor.ajax().url = `${_url.protocol}//${_url.host}/api/v1/some-endpoint/${Object.keys(request.data)[0]}/${_url.search}`;
editor.ajax().type = 'PUT'
}
editor.ajax().data = request.data[Object.keys(request.data)]
})
This will update the ajax configuration of the edit request right before it get sent. Django Rest expects a PUT request and the id of the record to be added at the end of the URL. As you can see we grab the id from the data object (Its the first key of the request.data object), and we can also change the type of request to PUT.

Ember save data to store and display without having a server api

I have a users model which fetches data from github users api (https://api.github.com/users). While displaying the list there is a add button which should add the user to a shortlist section below and which has a remove button to remove user from shortlist. I don't have api to save shortlist data. What is the best approach to make this work?
Try 1: Created a shortlist model and used store.push
this.store.push({
data: [{
id: user.id,
type: 'shortlist',
attributes: {
login: userData.login,
avatar_url: userData.avatar_url,
type: userData.type
}
}]
});
and used item.unloadRecord(); to remove from model. But did nor found a way to fetch all record and show as this.store.peakAll('shortlist') wasen't working.
Try 2: Used localstorage to add user to shortlist, display and remove but here it needs page reload to display the add/remove changes as i used setupController to get the items from localstorage.
Please suggest how to do this in best possible way.

How to update an existing record when creating a record with ember-data

When I try to create a model instance
record = this.store.createRecord('model', { /* whatever */ });
record.save();
And my API updates an already existing backend record instead of creating a new one. The API returns HTTP 200 [ok] (could also be 202 [accepted]) instead of 201 [created].
What is the ember way to have this record not created in the store if an instance of the same record is already there?
Right now if I "create" a record that turns out to update an existing record X times, I end up having the same record (with the same ID) repeated X times in my ember-data store.
When you use createRecord, you're telling Ember to add a new record to your store.
You need to fetch your record into your store first, if you want to update it:
this.store.find('model', id).then(function(record) {
record.set('property', 'value');
record.save();
});
http://emberjs.com/api/data/classes/DS.Store.html#method_createRecord
Maybe you're looking for this.store.update( ... ), depending on your specific needs: http://emberjs.com/api/data/classes/DS.Store.html#method_update

Load a model manually with EmberData

I have an Ember app with a login form which returns the current user in JSON format after successful login.
Using createRecord sets the returned JSON attributes directly on the model. For instance, is_private becomes user.is_private, not user.get('isPrivate')?
How do I load the user model so that the attributes are set correctly and I don't have to re-fetch it using the id?
As of a few days ago in ember data 1.0 beta you can use pushPayload to load data directly into the store. For example if you get data pushed to your app through WebSockets (we use the Heroku add-on Pusher). You can call it on the store (source) directly and it will pass it through the appropriate serializer:
var postsJSON = {
posts: [
{id: 1, post_title: "Great post"}
]
}
this.store.pushPayload('post',postsJSON)
NOTE that it will not currently load a singular object (ie post: {id: 1, post_title:"First!"}) - you need to format it as plural with an array.
DS.RESTSerializer has pushPayload as well (source), in which case you need to pass it the store instead.
I highly encourage reading the source code before using, as it looks like the implementation of it will be revisited.
Supposedly, the official way to do this is using adapter.load, as described in this thread:
Loading Data
Previously, some features of the store, such as load(), assumed a
single adapter.
If you want to load data from your backend without the application
asking for it (for example, through a WebSockets stream), use this
API:
store.adapterForType(App.Person).load(store, App.Person, payload);
This API will also handle sideloaded and embedded data. We plan to add
a more convenient version of this API in the future.
But unfortunately, it doesn't handle sideloaded data, despite what the documentation claims. I personally use something like the following, which is based on how find(ID) is implemented:
var id = json["person"]["id"];
var store = DS.get("defaultStore");
var adapter = store.adapterForType(App.Person);
adapter.didFindRecord(store, App.Person, json, id);
var person = App.Person.find(id);
Note that this code assumes JSON in the same format that find(ID) expects to receive from the server, as documented in the RESTAdapter guide:
{
person: {
id: 1,
is_private: false,
projects: [3]
},
projects: [
{ id: 3, name: "FooReader" }
]
}
This will apply any transformations you've configured using keyForAttributeName (such as mapping is_private to isPrivate), and it will handle sideloaded records. I'm not sure if this is a best practice, but it works quite well.
how about store.push('user', userJSON)?
http://emberjs.com/guides/models/pushing-records-into-the-store/#toc_pushing-records
All answers above did not work for me.
What only worked for me was:
this.store.buildRecord(this.store.modelFor('person'), data.id, data)

How to use Backbone collection's create method correctly

I found that when I use the collection.create to create a new model, backbone will send a post request, but the post data is incorrect
for example
collection.create({name:'test'})
backbone will send POST data using "{name:'test'}" as key, and "" as value,
but I want the POST data by using name as key, 'test' as value,
can anybody no how to setting it,
I use django as the server
thanks in advance
Unless you change it backbone's collections use Backbone.sync to communicate with your backend.
In the docs they say:
With the default implementation, when Backbone.sync sends up a
request to save a model, its attributes will be passed, serialized as
JSON, and sent in the HTTP body with content-type application/json
So I guess you need to do something like this in your django view
json.load(request.POST)
or use a custom sync function that does not serialize the data to json
You'll need to parse the raw post data string and parse it into a python dict.
import json
data = json.loads(request.raw_post_data)
You can also set
Backbone.emulateJSON = true;
as per http://backbonejs.org/#Sync-emulateJSON