Chciałbym używać HTML5 Local Storage z moim Ember.js.Jak używać HTML5 Local Storage z Ember.js?
Nie znalazłem żadnych przykładów wykonania tej czynności bez danych Ember.
Jak należy to zrobić? Co muszę wziąć pod uwagę?
Więc powiedzmy, że mamy obiekt o nazwie Storage że w naszym realizacji rzeczywistych stanowiłoby przedmiot adaptera jak dla localStorage do przechowywania i pobierania danych:
App.Storage = Ember.Object.extend({
init: function() {
this.clearStorage();
var items = ['foo', 'bar', 'baz'];
localStorage.items = JSON.stringify(items);
},
find: function(key) {
// pseudo implementation
if(!Ember.isNone(key)) {
var items = [];
var storedItems = JSON.parse(localStorage[key]);
storedItems.forEach(function(item){
items.pushObject(item);
});
return items;
}
},
clearStorage: function() {
// pseudo implementation
localStorage.clear();
}
});
przy wdrożeniach pseudo, można zobaczmy, że istnieje pewna tablica z niektórymi danymi przechowywanymi podczas inicjalizacji obiektu, użyjemy tego później w naszym haku IndexRoutemodel, aby ją pobrać, aby pokazać, że to działa.
teraz do bardziej ładne rzeczy, można zrobić register & inject bezpośrednio po aplikacji jest gotowy, ale co jeśli chcemy go mieć już dostępna przy inicjalizacji aplikacji? Cóż, "tam jest funkcja ember", o nazwie Application.initializer, inicjator to proste klasy z właściwością 'name' i funkcją initialize, w której masz dostęp do aplikacji container i rób to, co trzeba zrobić, pozwól mi wyjaśnić to w kodzie:
aby otrzymywać powiadomienia początek ładowania aplikacji możemy słuchać przypadku onLoad stworzyć nasze zajęcia initializer że będzie register i inject wcześniej wspomniano Storage obiekt do każdego kontrolera i każdej trasie:
Ember.onLoad('Ember.Application', function(Application) {
// Initializer for registering the Storage Object
Application.initializer({
name: "registerStorage",
initialize: function(container, application) {
application.register('storage:main', application.Storage, {singleton: true});
}
});
// Initializer for injecting the Storage Object
Application.initializer({
name: "injectStorage",
initialize: function(container, application) {
application.inject('controller', 'storage', 'storage:main');
application.inject('route', 'storage', 'storage:main');
}
});
});
Teraz, od Storage obiekt został wprowadzony do każdej trasy i każdy kontroler, który możemy w końcu uzyskać dostęp do niego w naszym haczyku IndexRoutemodel i udostępnić powyższą tablicę sklepów za pośrednictwem wywołania self.get('storage').find('items') do naszego szablonu, który ma być renderowany (po prostu dodano obietnicę, aby była faktycznie zgodna z Ember drogi iz jakiegoś fikcyjnego opóźnieniem, a nie tylko zwrócenie tablicy):
App.IndexRoute = Ember.Route.extend({
model: function(){
var self = this;
var promise = new Ember.RSVP.Promise(function(resolve) {
Ember.run.later(function() {
var data = self.get('storage').find('items');
console.log(data);
resolve(data);
}, 1000);
});
return promise;
}
});
W naszej index szablonie możemy teraz agnostically pętla nad atrapa tablica nie dbając gdzie to pochodzi z:
<script type="text/x-handlebars" id="index">
<h2>Index</h2>
<ul>
{{#each item in model}}
<li>Item: {{item}}</li>
{{/each}}
</ul>
</script>
I wreszcie , możesz zobaczyć tutaj wszystkie powyższe wyjaśnione w działającym przykładzie: http://jsbin.com/eqAfeP/2/edit
Mam nadzieję, że to pomaga.
Zaakceptowanych odpowiedź jest wielki, ale myślałem, że chciałbym dodać tę alternatywę:
Dan Gebhardt stworzył bardzo ciekawy biblioteka nazywa Orbit.js za koordynację różnych źródeł danych na kliencie. Istnieją trzy gotowe do użycia źródła danych: pamięć, pamięć lokalna i json api.
Aby zintegrować ember, sprawdź numer ember-orbit.
W tej chwili jest jeszcze intensywnie rozwijany i wprowadza inny paradygmat niż Ember Data, więc należy zachować ostrożność!