2017-01-27 3 views
0

am новичок, работающий с emberJs.Как хранить, извлекать и удалять данные с использованием данных Ember?

В настоящее время я разрабатываю приложение ember, которое достигло стадии, чтобы реализовать автономную функцию, в которой предыдущие сохраненные данные должны быть доступны во время автономной работы.

В моем приложении следующий код одного из шаблонов, которые я использую, шаблоны/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 файл, маршруты/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) как реализовать функцию уголька данных, чтобы я мог получать данные в формате JSON, а в режиме онлайн через эту ссылку и хранить его в данном-магазине.

2) Извлеките данные из хранилища данных в файл маршрута js, когда пользователь перейдет на этот маршрут в режиме онлайн/офлайн.

3) Удалите все предыдущие данные для этого маршрута, если они были выбраны повторно в режиме онлайн, и обновите новые данные, полученные по URL-адресу, который получает данные JSON. И если Offline просто пропустите этот шаг.

Я уже реализовал сервис-работника с брокколи-serviceworker в этом приложении, чтобы реализовать автономную функцию.

Поскольку я не нашел способ сохранить данные, к которым можно получить доступ в автономном режиме, например, используя функцию IndexedDB, я думаю, что данные ember могут помочь.

, когда он попросил моего рецензента, я лично предложил мне использовать данные Ember Data с пакетом broccoli-serviceworker, чтобы настроить сервис-работника, имеющего доступ к библиотеке Embers Data.

, если есть лучший вариант для хранения и извлечения данных, которые тоже с автономной совместимостью, приветствуются.

Пожалуйста, дайте решение с пошаговыми инструкциями, которые нужно следовать, чтобы решить эту проблему

ссылку GitHub репо в мой проект: https://github.com/JEEVANJGA/Capstone-News-App

+1

Я не уверен, если я понимаю - вы хотите, чтобы пользователь мог извлекать данные из Интернета в автономном режиме (2-я точка)? Приложение Ember существует только для пользователей. Чтобы иметь возможность отображать некоторые данные, необходимо сначала загрузить их в браузер пользователя. Единственный случай, когда ваша точка 2 работала бы, когда пользователь 1. открывает приложение Ember, видит список вещей 2. отключает интернет 3. все еще может видеть список вещей, перемещаться по приложению и т. Д. В автономном режиме. Это то, что вы хотите реализовать? – Senthe

+0

@Senthe да. Это то, что я имел в виду. Приложение должно отображать данные, которые были у него, когда он был в сети, прежде чем он отключился. –

ответ

1

Просто обернуть Ember $ получить с RSVP... Promise и использовать LocalStorage для кэширования:

  1. Try, чтобы получить питают
  2. Если запрос выполнен успешно, сохраните данные в локальном хранилище и решить обещание
  3. Если запрос не выполнен, это означает отсутствие Интернета, получение данных из локального хранилища и разрешение обещаний. Необязательно: установите таймаут, чтобы обновить модель за минуту.

В отношении указанных выше указания @Gennady Догаев, @JEEVAN ДЖОРДЖ ANTONY изменили маршруты/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, использующим localstorage, даже без использования данных ember, функций pouchDB или indexedDB.

+0

Потеряны ли данные локального хранилища, если сеанс закончился? И если это так, это решение не будет эффективным, правильно? –

+0

@JEEVANGEORGEANTONY локальное хранилище является постоянным, вы можете узнать об этом в [MDN] (https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Недостатком этого является ограниченное пространство (вы можете рассчитывать на ~ 5 МБ) и скорость. Но в любом случае альтернативного хранилища на стороне клиента нет. База данных веб-SQL, к сожалению, поддерживается только Chrome. –

+0

Что касается IndexedDB и PouchDB –

Смежные вопросы