Как использовать локальное хранилище HTML5 с Ember.js?

Question

Я хотел бы использовать локальное хранилище HTML5 с моим Ember.js.

Я не смог найти примеров этого без Ember Data.

Как это сделать? Что мне нужно учитывать?

Answer 1

Так скажем, у нас есть объект, называемый Storage, что в нашем реальном мире реализации будет представлять собой адаптер, как объект для localStorage для хранения и извлечения данных:

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

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

Теперь более хороший материал, вы могли бы сделать register & inject непосредственно после того, как приложение будет готово, но что, если мы хотим, чтобы это было уже доступно при инициализации приложения? Ну, «там какая-то особенность», называемая Application.initializer, инициализатор - это простые классы с свойством «имя» и функция initialize, где у вас есть доступ к вашему приложению container и делайте то, что когда-либо нужно сделать, позвольте мне объяснить это в коде:

чтобы получать уведомления, когда в начале загрузки приложения мы можем слушать onLoad события, чтобы создавать классы инициализатора, которые будут register и inject ранее упомянутых Storage объекта в каждый контроллер и каждый маршрут:

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

Теперь, начиная с Storage объект был введен в каждый маршрут, и каждый контроллер мы можем, наконец, получить к нему доступ в нашем IndexRoute10 крючком и сделать массив магазинов, упомянутый выше, доступным через вызов self.get('storage').find('items') к нашему шаблону, который будет отображаться (просто добавлено обещание сделать его фактически соответствующим Тлеющий-путь и с некоторой фиктивной задержкой, а не только возвращая массив):

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

В нашем index шаблоне мы можем теперь agnostically перебираемы фиктивный массив не заботясь о том, где он приходит от:

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

И, наконец, , вы можете увидеть здесь все приведенное выше в рабочем примере: http://jsbin.com/eqAfeP/2/edit

Надеюсь, это поможет.

Answer 2

Принятый ответ велик, но я думал, что я хотел бы добавить эту альтернативу:

Dan Gebhardt создал очень интересная библиотека называется Orbit.js для координации различных источников данных на клиенте. Существует три источника данных: память, локальное хранилище и json api.

Для интеграции с ember, проверьте ember-orbit.

В настоящее время он все еще находится в тяжелом развитии, и он вводит другую парадигму, чем Ember Data, поэтому продолжайте с осторожностью!