javascript - 如何使用 Ember Data 存储、检索和删除数据？

Question

我是一个使用 emberJs 的新手。

目前，我正在开发一款 ember 应用程序，该应用程序已达到实现离线功能的阶段，即必须在离线状态下访问以前存储的数据。

在我的应用程序中，以下代码是我使用的模板之一，templates/bbc.hbs:

{{#link-to 'bbc'}}<img src="/assets/images/bbc-news-icon.png" alt="bbc news logo" style="max-width: 150px;min-height:150px;">{{/link-to}} 
{{log model}}

{{#each model.articles as |item|}}
<hr>
<div class="panel panel-primary">
<div class="panel-heading"><span class="badge">Title</span>
<h3>{{item.title}}</h3></div>
<div class="panel-body">
<span class="badge">Description</span>
{{item.description}}
</div>
<div class="panel-footer"><span class="badge">URL to News</span>
 <a href={{item.url}} target="_blank" role="link" aria-label={{item.title}}>   {{item.title}} </a>
 </div>
</div>

{{/each}}
{{outlet}}

对于上面的模板，下面是相应的路由js文件，routes/bbc.js

import Ember from 'ember';

export default Ember.Route.extend({
model(){
    return Ember.$.get('https://newsapi.org/v1/articles?source=bbc-news&sortBy=top&apiKey=c4ea221e6833496bad7716c6c4fc5ece');
}
});

我需要知道的是:

1)如何实现 ember 数据功能，以便我可以通过此 url 在线获取 JSON 数据并将其存储在数据存储中。

2)当用户在线/离线状态下移动到该路由时，从数据存储中检索数据到路由js文件中。

3) 如果在线时再次选择，则删除该路由的所有先前数据，并更新通过接收 JSON 数据的 Url 接收到的新数据。如果离线，则跳过此步骤。

我已经在这个应用程序中实现了 service-worker 和 broccoli-serviceworker 来实现离线功能。

由于我没有找到任何方法来存储可以在离线状态下访问的数据(例如使用 IndexedDB 功能)，我认为 ember 数据可以提供帮助。

在要求我的审阅者进行审阅时，他个人建议我将 Ember Data 与 broccoli-serviceworker 包一起使用来配置可以访问 Embers 数据库的 Service Worker。

如果在存储和检索数据方面有更好的选择，并且具有离线兼容性，欢迎。

请提供解决方案，并提供解决此问题必须遵循的分步说明

我的项目的 Github 存储库链接:https://github.com/JEEVANJGA/Capstone-News-App

Answer 1

只需用 RSVP.Promise 包装 Ember.$.get 并使用 localStorage 进行缓存:

1. 尝试获取 Feed
2. 如果请求成功，将数据保存到本地存储并解析 Promise
3. 如果请求失败，则意味着没有互联网，从本地存储检索数据并解决 promise 。可选:设置超时以在一分钟内刷新模型。

关于@Gennady Dogaev给出的上述说明，@JEEVAN GEORGE ANTONY将问题中的routes/bbc.js文件更改如下:

import Ember from 'ember';

export default Ember.Route.extend({
model(){
function getJSON(url){
  return new Promise(function(resolve, reject){
    var xhr = new XMLHttpRequest();

    xhr.open('GET', url);
    xhr.onreadystatechange = handler;
    xhr.responseType = 'json';
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.send();
    function handler() {
      if (this.readyState === this.DONE) {
        if (this.status === 200) {
          resolve(this.response);
        } else {
                  reject(new Error('getJSON: `' + url + '` failed with   status: [' + this.status + ']'));
        }
      }
    }
  });
}
 return getJSON('https://newsapi.org/v1/articles?source=bbc-news&sortBy=top&apiKey=c4ea221e6833496bad7716c6c4fc5ece').then(function(json) {
      // on fulfillment
       var data = JSON.stringify(json);
         localStorage.setItem('bbcnews', data);
         return JSON.parse(data);
    }, function(reason) {
       // on rejection
              console.log(reason);
              var data = JSON.parse(localStorage.getItem('bbcnews'));
              console.log(data);
             return data;
    });
  }
  });

这解决了使用本地存储的 ember 数据的离线可访问性，即使不使用 ember 数据、pouchDB 或 indexedDB 功能。