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

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)当用户在 online/offline.

时移动到这条路线时，从数据存储中检索数据到路线 js 文件

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

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

因为我没有找到任何方法来存储离线时可以访问的数据，比如使用 IndexedDB 功能，我认为 ember 数据可以提供帮助。

在要求我的审阅者进行审阅时，他个人建议我使用 Ember Data 和 broccoli-serviceworker 包来配置可以访问 Embers 数据库的服务工作者。

如果有更好的数据存储和检索选项，也具有离线兼容性，欢迎。

请提供一个解决方案，其中包含解决此问题必须遵循的分步说明

Github 回购 link 到我的项目：https://github.com/JEEVANJGA/Capstone-News-App

Answer 1

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

尝试获取 Feed
如果请求成功，将数据保存到本地存储并 resolve 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 数据、pouchDB 或 indexedDB 功能，这也解决了使用本地存储 ember 数据的离线可访问性问题。

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

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

javascript

ember.js

ember-data

ember-cli

offline