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接收的新数据。如果离线只是跳过这一步。

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

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

在向我的评论员询问评论时，他个人建议我使用Ember Data和broccoli-serviceworker软件包来配置可以访问Embers Data库的服务工作者。

如果有关于存储和检索数据的更好选择，也可以使用离线兼容性，欢迎使用。

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

Github repo链接到我的项目：https://github.com/JEEVANJGA/Capstone-News-App

Answer 1

只需包装你的Ember。$。使用RSVP.Promise并使用localStorage进行缓存：

尝试获取Feed
如果请求成功，请将数据保存到本地存储并解决承诺
如果请求失败，那意味着没有互联网，从本地存储中检索数据并解决承诺。可选：设置超时以在一分钟内刷新模型。

关于@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功能，也可以使用localstorage解决使用ember的数据的脱机可访问性。

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

1 个答案: