CODEWITHSUNDEEP
ember.js
SuperMarco
SuperMarco

Reputation: 721

Emberjs - Empty model to load faster

Is it possible to return an empty object from the model to load the html faster ? because I know that the page is waiting for the model to be set, so that's why I wanted to know if someone already tried to do this.

App.ApplicationRoute = Ember.Route.extend({
    model: function() {
        return;
    },
    setupController: function(controller, model) {

        controller.set('model', this.store.find('user'));
    }
})

Of course this doesn't work... but it should update the model no ?

[Edit]

My Route :

App.ProductData = Ember.ObjectProxy.extend(Ember.PromiseProxyMixin)

    App.ApplicationRoute = Ember.Route.extend({
        setupController: function( controller, model) {
            this._super(controller, this.getProductData());
        },
        getProductData: function() {
            var that = this;

            var promise = $.getJSON('js/product.json').then( function( data ) {
                data = data.map(function( item, idx ) {
                    item.key = idx;
                    item.product = true;
                    item.imagesBase64 = [];
                    return item;
                });

                var uniqueImageURLs = data.reduce(function( result, item ) {
                    item.images.forEach( function( img ) {
                        result[img] = true;
                    });
                    return result;
                }, {});
                var count = Object.keys( uniqueImageURLs).length;
                that.setProperties({complete: count});

                var saves = data.map(function( item ) {
                    var device = that.store.createRecord( 'device', item );
                    return device.save();
                });
                console.log(data);
            return data;
            }).fail(function( err ) {
                console.log(err);
                var list = that.store.findQuery('device', { product: true });
                return list;
            });// end of getProductData

            return App.ProductData.create({
                promise: promise
            });
        },

    });

I also set up my controller :

App.ApplicationController = Ember.ArrayController.extend({
    selectedItem: undefined,

    actions: {
        selectDevice: function( device ) {
            this.set('selectedItem', device);
        }
    }
})

I use it to get the item the user clicked on.

Upvotes: 1

Views: 291

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

Yes, of course that will work, honestly the only problem I would see is if you don't define a controller Ember will build up a default controller for you. And if Ember has to guess which controller to use based on the model undefined it will give you a controller analogous to

App.IndexController = Em.Controller.extend()

The controller above won't proxy get/set calls on it to the model/collection set on it, but if you were to define the controller type Ember should use it would be just fine

App.IndexController = Em.ArrayController.extend();

This is a perfectly fine practice as long as no logic/route beneath controller is depending on that model to be populated in any synchronous fashion.

http://emberjs.jsbin.com/OxIDiVU/504/edit

Here's a quick example using a proxy promise:

http://emberjs.jsbin.com/OxIDiVU/415/edit

And here's an example using proxy promise for arrays:

http://emberjs.jsbin.com/OxIDiVU/505/edit

Upvotes: 1

Related Questions