Ember.jsでHTML5ローカルストレージを使用するには？

Question

Ember.jsでHTML5ローカルストレージを使用したいと思います。

Ember 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(); 
    } 
}); 

、次のことができます。

Answer 1

それでは、私たちはlocalStorageは、データを格納および取得するために私たちの現実世界の実装では、アダプタのようなオブジェクトを表すであろうとStorageオブジェクトと呼ばれてきたとしましょうオブジェクトの初期化時にいくつかのデータが格納されたダミー配列があることを確認してください。後でIndexRoutemodelフックを使用して検索します。アプリケーションの準備ができた後、より素敵なものに、あなたが直接register & injectを行うことができます今すぐ

が、我々は、それはアプリケーションの初期化時に既に利用になりたい場合はどう？まあ、そこにはemberの機能があります。Application.initializerと呼ばれ、イニシャライザは 'name'プロパティとinitializeという関数を持つシンプルなクラスで、アプリケーションにアクセスする場所はcontainerです。コード内：

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'); 
    } 
    }); 
}); 

：アプリケーションは、我々はすべてのコントローラとすべてのルートになります registerと inject前述 Storageオブジェクト私たちの初期化子クラスを作成する onLoadイベントを聞くことができるのロードを開始したときに通知されるように

今、Storageオブジェクトはすべてのルートとすべてのコントローラに注入されました。最後にIndexRoutemodelフックにアクセスして上記のストア配列を呼び出してself.get('storage').find('items')というテンプレートを呼び出してレンダリングすることができます（実際にエンバーウェイというだけで、配列を返すよりも、いくつかの仮想遅れ、）と：

<script type="text/x-handlebars" id="index"> 
    <h2>Index</h2> 
    <ul> 
    {{#each item in model}} 
     <li>Item: {{item}}</li> 
    {{/each}} 
    </ul> 
</script> 

：それはどこから来ているダミー配列が思いやりではない以上、我々はできる今agnosticallyループたちの indexテンプレートで

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; 
    } 
}); 

最後にここでは実例で説明したすべてをここで見ることができます：http://jsbin.com/eqAfeP/2/edit

希望します。

Answer 2

受け入れ答えは素晴らしいですが、私は、私はこの代替を追加するだろうと思った：

ダンGebhardtは、クライアント上の異なるデータソースを調整するためOrbit.jsと呼ばれる非常に興味深いのライブラリを作成しました。データソースには、メモリ、ローカルストレージ、json APIの3つがあります。

ember統合の場合は、ember-orbitをチェックしてください。

この時点でまだ重い開発が行われており、Ember Dataとは異なるパラダイムが導入されているため、慎重に進んでください。