ember.js 如何处理多对多关系的创建？答案

【问题标题】：ember.js how to handle ManyToMany relations creating?ember.js 如何处理多对多关系的创建？
【发布时间】：2013-07-26 21:27:10
【问题描述】：

假设在我的后端我有模型Dealer 和Car，它们都与Ember 中的ManyToMany 关系连接。我可以在后端手动创建关系，然后在使用 Ember 视图显示它时，我可以轻松地显示 Dealer X 在他的报价中有 Car 1、Car 2 和 Car 3。此外，在显示Car 时，我可以显示所有包含Car 模型的Dealers。

现在我需要添加一些编辑可能性，例如，当我编辑Car 时，我想选择Dealers，他的报价中有这个Car。（我只需要对关系的一侧进行这种编辑的可能性 - 不是两者，所以我可以接受我能够将Dealers 添加到Cars 但不需要在相反的方向上这样做（这正是如何我的背景工作）

所以在App.CarController 中，我创建了addDealerToCar 和deleteDealerFromCar 之类的操作，它们向后端发送适当的查询以保存关系。

问题是：如何创建一些字段，这将允许我选择Dealer 即。使用选择框或其他下拉菜单，然后调用将发送到后端的操作？

【问题讨论】：

标签： php ember.js many-to-many

【解决方案1】：

我最近使用复选框实现了在表单中添加多对多关系。这适合我的用例，因为我只有两到六个经销商可供您为特定汽车选择。如果你有更多，这可能不合适。

这是我用来翻译到您的场景的代码。我从这个问题的代码中获得了灵感：Many to Many Relationships with Ember, ember-data and Rails

查看：

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')

  })

});

模板（这将是编辑汽车表单的一部分）：

<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>

您需要添加类似的内容以使上述代码正常工作，以便您可以访问所有经销商的列表。

App.CarEditRoute = Ember.ObjectController.extend({

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

});

【讨论】：