Ember data model callbacks and triggering events on associated models

@andywww wrote:

I have a best practice question. I currently have a mapping app which maps out routes based on where a user drops markers all using ember leaflet. It’s still in the early stages and I’d like to set off down the right road (no pun intended).

What I currently have is:

http://recordit.co/p2ktGKddxf

When a user drops drags a marker, on dragEnd it will persist the marker’s (waypoint) new position.

The marker has 2 associated polylines (route), the one coming into it (incomingRoute) and the one going out to the next marker (outgoingRoute) which also need to be updated to represent the new position.

Question is, currently, the updating of the route models happens in a controller action which is passed to a component to fire on onDragend of the marker. The problem here is it feels way too out of the remit of the controller to manage that functionality and also, you’ll note on the animation above, if I change the coords of the waypoint in the sidebar, it obviously doesn’t fire the update as it’s part of the drag end code.

In rails I’d likely do something on the after_save hook that triggered the routes to do the work themselves:

def some_after_save_method do
    self.incoming_route.some_update_function
    self.outgoing_route.some_update_function
end

I was wondering what the idiomatic ember approach was to making route updates the concern of route and not the controller action?

I currently have a crude, procedural action on a controller which is working but I’d like to understand and refactor it to the proper ‘ember way’ of doing it to allow for validation/save failures.

What I currently have is:

// Waypoint Model

export default DS.Model.extend({
  incomingRoute: DS.belongsTo('route', {inverse: 'waypointEnd'}),
  outgoingRoute: DS.belongsTo('route', {inverse: 'waypointStart'}),
  ride: DS.belongsTo('ride'),
  name: DS.attr('string'),
  latlng: DS.attr('point-to-lat-lng'),
  position: DS.attr('number')
});

// Route Model

export default DS.Model.extend({
  waypointStart: DS.belongsTo('waypoint', {inverse: 'outgoingRoute'}),
  waypointEnd: DS.belongsTo('waypoint', {inverse: 'incomingRoute'}),
  ride: DS.belongsTo('ride'),
  line: DS.attr('line_string_to_polyline'),
  state: DS.attr('string')
});

// Ride Controller

export default Controller.extend({
  ...

  actions: {
    ...

    async markerDragend(waypoint, loc){
      waypoint.get('incomingRoute').then(function(r){
        if (r) {
          let line = r.get('line');
          line.pop();
          line.push([String(loc.lat), String(loc.lng)]);
          r.setProperties({
            line: A(line),
            stateColour: '#3388ff',
            stateOpacity: 1
          });
          r.save();
        }
      });
      waypoint.get('outgoingRoute').then(function(r){
        if (r) {
          let line = r.get('line');
          line.shift();
          line.unshift([String(loc.lat), String(loc.lng)]);
          r.setProperties({
            line: A(line),
            stateColour: '#3388ff',
            stateOpacity: 1
          });
          r.save();
        }
      });
      waypoint.set('latlng', loc);
      await waypoint.save();
    },
    ...

  }
});

Any input/steer you guys could offer would be much appreciated!

Andy.

Posts: 1

Participants: 1

Read full topic