问题描述
我想使用我的Ember.js使用HTML5本地存储。
我没有找到任何没有Ember Data的例子。 / p>
应该怎么做？我需要考虑什么？
所以说我们有一个名为 Storage 在我们的真实实现中，将代表一个适配器类对象，用于存储和检索数据的 localStorage ：
App.Storage = Ember.Object.extend（{
init：function（）{
this.clearStorage（）;
var items = ['foo'，'bar'，'baz'];
localStorage.items = JSON.stringify（items）;
}，
find：function（key ）{
//伪实现
如果（！Ember.isNone（key））{
var items = [];
var storedItems = JSON.parse（localStorage [key] ）;
storedItems.forEach（function（item）{
items.pushObject（item）;
}）;
return items;
}
} ，
clearStorage：function（）{
//伪实现
localStorage.clear（）;
}
}）;
除了伪实现，您可以看到有一个虚数组，其中一些数据存储在对象初始化中，我们将在稍后的 IndexRoute 中使用这个钩子来检索它，只是为了表明这样做。
现在给更好的东西，你可以做注册&应用程序准备就绪后直接注入注入，但是如果我们希望在应用程序初始化时可以使用它？好吧，有一个ember功能，称为 Application.initializer ，初始化器是具有'name'属性和 initialize的简单类， code>函数，您可以访问您的应用程序容器，并做任何需要做的事情，让我在代码中解释一下：
要在应用程序开始加载时收到通知，我们可以收听 onLoad 事件来创建我们的初始化程序类，它将将和注入前面提到的存储对象到每个控制器和每个路由： p>
Ember.onLoad（'Ember.Application'，function（Application）{
//注册存储对象的初始化程序
Application.initializer（{
name：registerStorage，
initialize：function（container，application）{
application.register（'storage：main'，application.Storage， singleton：true}）;
}
}）;
// I用于注入存储对象的nitializer
Application.initializer（{
name：injectStorage，
initialize：function（container，application）{
application.inject 'controller'，'storage'，'storage：main'）;
application.inject（'route'，'storage'，'storage：main'）;
}
}）;
}）;
现在，由于 Storage 在每个路线和每个控制器中，我们终于可以在我们的 IndexRoute 中将其访问，并提供存储阵列以上可以通过调用 self.get（'storage'）。find（'items'）到我们的模板来渲染（只是添加了一个承诺，使其实际上符合ember-way和一些虚构的延迟，而不是只是返回数组）：
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）;
}）;
返回承诺;
}
}）;
在我们的索引模板中，我们现在可以知道循环在虚拟数组上，不关心它来自哪里：
< script type =text / x-handlebarsid = 索引 >
< h2>索引< / h2>
< ul>
{{＃#each item in model}}
< li> Item：{{item}}< / li>
{{/ each}}
< / ul>
< / script>
最后，您可以在这里看到上面所有这些工作的例子：
希望有帮助。
I would like to use HTML5 Local Storage with my Ember.js.
I haven't been able to find any examples of doing this without Ember Data.
How should this be done? What do I need to consider?
So let's say we have an object called Storage that in our real-world implementation would represent an adapter-like object for the localStorage to store and retrieve data:
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();
}
});
Beside the pseudo implementations, you can see there is a dummy array with some data stored at object initialization, we will use this later in our IndexRoute model hook to retrieve it, just to show that this works.
Now to the more nice stuff, you could do the register & inject directly after the application is ready, but what if we wanted it to be already available at application initialization? Well "there an ember-feature for that", called Application.initializer, initializer are simple classes with a 'name' property and a initialize function in where you have access to your application container and do what ever needs to be done, let me explain this in code:
To be notified when the application start loading we can listen to the onLoad event to create our initializer classes that will register and inject the before mentioned Storage object into every controller and every route:
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');
}
});
});
Now, since the Storage object was injected into every route and every controller we can finally get access to it in our IndexRoute model hook and make the stores array mentioned above available trough the call self.get('storage').find('items') to our template to be rendered (just added a promise to make it actually conform with the ember-way and with some fictive delay, rather than just returning the array):
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;
}
});
In our index template we can now agnostically loop over the dummy array not caring where it is coming from:
<script type="text/x-handlebars" id="index">
<h2>Index</h2>
<ul>
{{#each item in model}}
<li>Item: {{item}}</li>
{{/each}}
</ul>
</script>
And lastly, you can see here all the above explained in a working example: http://jsbin.com/eqAfeP/2/edit
Hope it helps.
这篇关于如何使用带有Ember.js的HTML5本地存储？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！