home
  • Blog
1.12
  • Getting Started
  • Concepts
  • The Object Model
  • Application
  • Templates
  • Routing
  • Components
  • Controllers
  • Models
    • Introduction
    • Defining Models
    • Creating and Deleting Records
    • Pushing Records into the Store
    • Persisting Records
    • Finding Records
    • Working with Records
    • The Rest Adapter
    • Connecting to an HTTP Server
    • Handling Metadata
    • Customizing Adapters
    • Frequently Asked Questions
  • Views
  • Enumerables
  • Testing
  • Configuring Ember.js
  • Ember Inspector
  • Cookbook
  • Understanding Ember.js
  • Contributing to Ember.js
Old Guides - You are viewing the guides for Ember v1.12.0.
Go to v5.0.0

Pushing Records into the Store

Edit pencil

One way to think about the store is as a cache of all of the records that have been loaded by your application. If a route or a controller in your app asks for a record, the store can return it immediately if it is in the cache. Otherwise, the store must ask the adapter to load it, which usually means a trip over the network to retrieve it from the server.

Instead of waiting for the app to request a record, however, you can push records into the store's cache ahead of time.

This is useful if you have a good sense of what records the user will need next. When they click on a link, instead of waiting for a network request to finish, Ember.js can render the new template immediately. It feels instantaneous.

Another use case for pushing in records is if your application has a streaming connection to a backend. If a record is created or modified, you want to update the UI immediately.

Pushing Records

To push a record into the store, call the store's push() method.

For example, imagine we want to preload some data into the store when the application boots for the first time.

We can use the route:application to do so. The route:application is the top-most route in the route hierarchy, and its model hook gets called once when the app starts up.

app/models/album.js
export default DS.Model.extend({
  title: DS.attr(),
  artist: DS.attr(),
  songCount: DS.attr()
});
app/routes/application.js
export default Ember.Route.extend({
  model: function() {
    this.store.push('album', {
      id: 1,
      title: "Fewer Moving Parts",
      artist: "David Bazan",
      songCount: 10
    });

    this.store.push('album', {
      id: 2,
      title: "Calgary b/w I Can't Make You Love Me/Nick Of Time",
      artist: "Bon Iver",
      songCount: 2
    });
  }
});
left arrow
Creating and Deleting Records
Persisting Records
right arrow
On this page

  • Pushing Records
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