ember.js how to handle ManyToMany relations creating?

Question

Let's say that in my backend I have models Dealer and Car, both are connected with ManyToMany relation also in Ember. I can create relations manually in backend and then while displaying it with Ember views I can easily display that Dealer X has Car 1, Car 2 and Car 3 in his offer. Also when displaying the Car I can display all Dealers who contains the Car model.

Now I need to add some editing possibility, I mean that for an example when I'm editing the Car I'd like to choose the Dealers who has this Car in his offer. (I need the possibility of such edit only for one side of relation - not both, so just can accept that Im able to add Dealers to Cars but don't need to do that in the opposite direction (that's exactly how my background is working)

So in App.CarController I created an actions like addDealerToCar and deleteDealerFromCar and they sends proper queries to backend which saves the relations.

Question is: how can I make some field, which will allow me to choose the Dealer ie. using a selectbox or other dropdown and then call an action which will send in to backend?

score 2 · Accepted Answer · edited May 23 '17 at 12:13

I recently implemented adding many-to-many relations in a form by using checkboxes. This was suitable for my use case because I only would have between two and six Dealerships that you could choose from for a particular Car. If you have more than that though, this probably isn't suitable.

Here is the code I used translated to your scenario. I took inspiration from the code in this question: Many to Many Relationships with Ember, ember-data and Rails

View:

App.CarEditView = Ember.View.extend({

  dealerCheckbox: Ember.Checkbox.extend({

    init: function(){
      this._super();
      var self = this;
      // start off with the checkboxes checked for any dealer that
      // has this car already
      this.get('car.dealers').forEach(function(dealer){
        if(dealer.get('id') == self.get('dealer.id')){
          self.set('checked', true);
        }
      });

    },

    checkedObserver: (function(){
      var car = this.get('car');
      if(this.get('checked'))
        car.addDealerToCar(this.get('dealer'));
      else
        car.deleteDealerFromCar(this.get('dealer'));
    }).observes('checked')

  })

});

Template (this would be part of the form to edit a Car):

<div class="control-group">
  <label class="control-label">Required Signatures</label>

  <div class="controls">
    {{#each dealer in controller.allDealers}}
      <label class="checkbox">

        {{view view.dealerCheckbox
          carBinding="controller.content"
          dealerBinding="dealer"
        }}
        {{dealer.title}}

      </label>
    {{/each}}
  </div>
</div>

And you would need to add something like this to make the above code work so that you can access a list of all the Dealers.

App.CarEditRoute = Ember.ObjectController.extend({

  setupController: function(controller, model) {
    this._super(controller, model);
    controller.set('allDealers', App.Dealer.find());
  }

});

ember.js how to handle ManyToMany relations creating?

1 Answers1