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

Using Fixtures

Edit pencil

Now we'll add fixture data. Fixtures are a way to put sample data into an application before connecting the application to long-term persistence.

First, update js/application.js to indicate that your application's ApplicationAdapter is an extension of the DS.FixtureAdapter. Adapters are responsible for communicating with a source of data for your application. Typically this will be a web service API, but in this case we are using an adapter designed to load fixture data:

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

Todos.ApplicationAdapter = DS.FixtureAdapter.extend();

Next, update the file at js/models/todo.js to include the following fixture data:

// ... additional lines truncated for brevity ...
Todos.Todo.FIXTURES = [
 {
   id: 1,
   title: 'Learn Ember.js',
   isCompleted: true
 },
 {
   id: 2,
   title: '...',
   isCompleted: false
 },
 {
   id: 3,
   title: 'Profit!',
   isCompleted: false
 }
];

Reload your web browser to ensure that all files have been referenced correctly and no errors occur.

Live Preview

Ember.js • TodoMVC

Additional Resources

  • Changes in this step in diff format
left arrow
Modeling Data
Displaying Model Data
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