jeudi 26 janvier 2017

How to store,retrieve and delete data using Ember Data?

am a newbie working with emberJs.

Currently, am developing an ember app that has reached a stage to implement the offline feature where previous data stored has to be accessed while offline.

In my app following code is of one of the templates I use, templates/bbc.hbs:

<img src="/assets/images/bbc-news-icon.png" alt="bbc news logo" style="max-width: 150px;min-height:150px;"> 



<hr>
<div class="panel panel-primary">
<div class="panel-heading"><span class="badge">Title</span>
<h3></h3></div>
<div class="panel-body">
<span class="badge">Description</span>

</div>
<div class="panel-footer"><span class="badge">URL to News</span>
 <a href= target="_blank" role="link" aria-label=>    </a>
 </div>
</div>




and for the above template following is the corresponding route js file, routes/bbc.js

import Ember from 'ember';

export default Ember.Route.extend({
model(){
    return Ember.$.get('http://ift.tt/2jvaMPQ');
}
});

what I need to know is:

1)how to implement the ember data feature so that I could fetch the JSON data while online through this url and store it in a data-store.

2)Retrieve data from data-store to the route js file when the user moves to this route while online/offline.

3)Delete all previous data for that route if selected again while online and update new data received through the Url that receives JSON data. And if Offline just skip this step.

I have already implemented the service-worker with broccoli-serviceworker in this app to implement the offline feature.

Since I didn't find any way to store the data that could be accessed while offline like using IndexedDB feature I think ember data could help.

while asked for a review to my reviewer, he personally suggested me to use Ember Data with the broccoli-serviceworker package to configure a service worker that has access to Embers Data library.

if there is a better option regarding storing and retrieval of data that too with offline compatibility, its welcome.

Please do give a solution with step by step instructions that has to be followed to solve this issue

Github repo link to my project: http://ift.tt/2jkEN1s




Aucun commentaire:

Enregistrer un commentaire