home
  • Blog
1.10
  • Getting Started
    • Getting Started
    • Planning The Application
    • Creating a Static Mockup
    • Obtaining Ember.js and Dependencies
    • Adding the First Route and Template
    • Modeling Data
    • Using Fixtures
    • Displaying Model Data
    • Displaying a Model's Complete State
    • Creating a New Model Instance
    • Marking a Model as Complete or Incomplete
    • Displaying the Number of Incomplete Todos
    • Toggling between Showing and Editing States
    • Accepting Edits
    • Deleting a Model
    • Adding Child Routes
    • Transitioning to Show Only Incomplete Todos
    • Transitioning to Show Only Complete Todos
    • Transitioning back to Show All Todos
    • Displaying a Button to Remove All Completed Todos
    • Indicating When All Todos Are Complete
    • Toggling All Todos Between Complete and Incomplete
    • Replacing the Fixture Adapter with Another Adapter
  • Getting Ember
  • Concepts
  • The Object Model
  • Application
  • Templates
  • Routing
  • Components
  • Controllers
  • Models
  • Views
  • Enumerables
  • Testing
  • Configuring Ember.js
  • Cookbook
  • Understanding Ember.js
  • Contributing to Ember.js
Old Guides - You are viewing the guides for Ember v1.10.0.
Go to v5.0.0

Replacing the Fixture Adapter with Another Adapter

Edit pencil

Finally we'll replace our fixture data with real persistence so todos will remain between application loads by replacing the fixture adapter with a localstorage-aware adapter instead.

Change js/application.js to:

window.Todos = Ember.Application.create();

Todos.ApplicationAdapter = DS.LSAdapter.extend({
  namespace: 'todos-emberjs'
});

The local storage adapter, written by Ryan Florence, can be downloaded from its source. Add it to your project as js/libs/localstorage_adapter.js. You may place this file anywhere you like (even just putting all code into the same file), but this guide will assume you have created the file and named it as indicated.

In index.html include js/libs/localstorage_adapter.js as a dependency:

<!--- ... additional lines truncated for brevity ... -->
<script src="js/libs/ember-data.js"></script>
<script src="js/libs/localstorage_adapter.js"></script>
<script src="js/application.js"></script>
 <!--- ... additional lines truncated for brevity ... -->

Reload your application. Todos you manage will now persist after the application has been closed.

Live Preview

Ember.js • TodoMVC

Additional Resources

  • Changes in this step in diff format
  • LocalStorage Adapter on GitHub
left arrow
Toggling All Todos Between Complete and Incomplete
We've finished covering Getting Started. Next up: Getting Ember - Getting Ember
right arrow
On this page

  • Live Preview
  • Additional Resources
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2023 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue