Using ember-data to perform a UI update with user defined parameters

Question

I am currently working on an ember.js app, using ember-data with its RESTAdapter to communicate with my service.

I defined the needed ember-data models and everything seems to work fine, but I am not quite sure, if I am going in the right direction - so this is going to be a "Is that solution alright?"-question.

Our service API provides a method to get records limited to a requested time frame - the REST request parameters simply look like this:

{ from: ..., to: ... }

The user of my UI should be able to select a time frame and the UI should update with the data within the requested time frame.

There will be no write operations for now - this is a read-only UI.

Here is my current solution:

I defined a route class which provides the model for the request result and an ArrayController which serves the UI.

Route Class Code:

MyModelRoute = Ember.Route.extend
    model: ->
        # Calling controller to get the required parameters for the initial
        # model setup - this doesn't feel right too, but I want to keep the
        # time frame parameters for the JSON request at one position (controller)...
        controller = @controllerFor('my_models')
        # get fromDate and toDate from controller
        MyModel.find({from: fromDate, to: toDate})

ArrayController Code:

MyModelController = Ember.ArrayController.extend
    updateMyModels: -> 
        # ... some boring code to get fromDate and toDate ...

        # Overwriting the content property which was previously set by
        # route's model property seems to be nasty...
        myModels = MyModel.find({from: fromDate, to: toDate})
        myModels.one('didLoad', =>
            @set('content', myModels) 
        )

My view provides two date pickers, allowing the user to specify which time frame she wants to see (fromDate and toDate in my sample code).

Whenever the user selects a new time frame, two observed variables on my controller are updated which will cause a new request to the server with the user requested time frame (updateMyModels() method in my sample).

So, here is my point: As you can see, I am currently updating the 'content' property of my ArrayController within the controller's updateMyModels() method which is bound to the UI timeframe properties - I am totally ignoring the previously provided route's model. So the model property on my route just exists to "initialize" my controller which seems to be a bit odd...

Everything works fine, but I am wondering if there is a better / right way to do that?

If I should use the model provided by the route instead of a controller property: Is there a way to communicate with the route's model from the controller (I am sure there is a way ;-) ), and more important: how can I reload the current route from my controller? Is the transitionTo() method the right way?

Thanks in advance!

ahx ahx · Accepted Answer · 2013-05-03T16:25:39

I was having a similar issue and ended up with removing the route object. Routes only make sense if you are accessing the URL params. Since MyModelRoute does not access the params just remove it. You can still initialize the controller inside its 'init' method.

Things would be different if you were encoding the query inside your path… like "/my_model/fromDate/toDate" or something. I didn't need that though. So i am handling everything in the controller.

Using ember-data to perform a UI update with user defined parameters

1 Answers