Preload data in Ember: Fixture vs REST adapter

4
votes

I have a fairly complicated Ember.js object that I'd like to send with the initial HTML/javascript when the page loads (to avoid a separate trip to the server), but then allow the user to modify it.

So I know how to set up FIXTURE data which is there directly, and I know how to set up the RESTAdapter so I can load/save to the server... can I do both?

It seems like the store gets set up once, for one or the other. Can I have multiple stores, for one data source?

Thanks!

2
ember.jsember-datapreload
Ember data supports sideloading data: emberjs.com/guides/models/the-rest-adapter/… but I'm not sure if you can pre-load a JSON model loaded with the initial page... - CraigTeegarden

2 Answers

3
votes

Regardless of which adapter you use, you can always load data directly into the store. For example,

App.Store = DS.Store.extend({
    init: function() {
        this._super();
        this.load(App.Post, {
            id: 1,
            text: 'Initial post.'
        });
    }
});

App.Post = DS.Model.extend({
  text: DS.attr('string')
});

For a complete example, see this jsfiddle.

4
votes

If you want to load the data from outside of your application-code, you could do it like the following:

Add a preload function to your document (below all your app.js and store.js):

<script>
    window.preload = function(store) {
        store.loadMany(App.Post,[10,11],[{ id: 10, content: "testcontent", author_id: 1 },{ id: 11, content: "testcontent2", author_id: 1 }]);
        store.load(App.User,{ id: 1, username: "supervisor"});
    }
</script>

In your ApplicationRoute you call the preload function with the store as a parameter.

App.ApplicationRoute = Ember.Route.extend({
    setupController: function(controller, model) {
        window.preload(this.store);
    }
});

This way you reduce the amount of request that are made when the application is being initialized.