How to pull long-calculation results from server via checkboxes

1

Hi there!

I was hoping someone could help me to determine the best way to accomplish the following using Ember:

  • User arrives at a page, it has a list of checkboxes down the left hand sidebar, and a graph on the right hand section of the page
  • There are 3 of the 15 checkboxes preselected when they arrive, which maps to a particular pre-computed graph
  • If the user selects a different checkbox, go to the server, ask for the new graph results and display the graph.

What is the proper architecture to make this work in Ember? There are far too many combinations to precompute all (32,767 combinations to be exact, which takes weeks to calculate), so I’ll need to pull as oneoffs.

There’s an obvious master/detail relationship here between the checkboxes and the graph. The obvious way would be to hook up a jquery event handler to watch for changes to the check boxes, perform an AJAX call and then manually update the view containing the graph, but it feels dirty to me.

Any help would be appreciated!

2

Just spitballing, but I’m thinking you could do master/detail with the master maintaining the state of the checkboxes.

You could wire it together like this:

  1. Use clicks a checkbox, triggering an action which gets handled by the master route
  2. The action handler compiles the state of the checkboxes (using a model or w/e) and fires a request to the server.
  3. Either hook up to the request promise to transitionTo the detail route when it’s resolved, or you use something like the Ember.PromiseProxyMixin to immediately transition (which would use the automagically generated ‘loading’ templates).

*Edit: * Hmm… this might not work actually, since the “model” probably hasn’t updated by the time the actionHandler is fired. An alternative approach in that case would either be to defer the execution of the actionHandler (using Ember.run & co) or fire the ajax request by observing changes on the model.

3

So there would be a single model that contains the checkbox states, and has an observer action that fires an ajax request on state change. I’m with you that far.

What I do with the AJAX promise though is not 100% clear. Transition to the child route after it resolves, and somehow encode the JSON response into the model for that child route?

4

Yes, exactly.

Something like this:

actions: {
  fetchGraph: function() {
    var model = this.controller.get('model'),
        // you'll have to implement this yourself
        params = model.serialize(); 

    var fetchGraph = $.getJSON('/graph/url', {data: params});

    var updateDetailRoute = function(graphData) {
      this.transitionTo('master.detail', graphData);
    }.bind(this);

    fetchGraph.then(updateDetailRoute);
  }
}

Probably not optimal, but it’s one approach at least. I hope you get the gist of it :smile:

5

Yeah I think I understand enough to be able to take a shot at it! Thank you very much for taking the time to write out an example :smile: