Install EmberX-Select p.437

Frontend Web Development: The Big Nerd Ranch Guide Chapter 24: Controllers
1

EmberX-Select has switched to v3.0 and the example in Ch.24 used v2.x. When installing with ember install emberx-select on page 437 use ember install emberx-select@2.2.3

2

already tried that approach but nothing, seems like an issue with ember compiling

3

which version of Ember do you have installed?

4

Here is the mark-up when using emberx-select version 3.0.0

<!-- templates/sightings/new.hbs -->
    {{#x-select value=model.sighting.cryptid class="form-control" as |xs|}}
      {{#xs.option}}Select Cryptid{{/xs.option}}
      {{#each model.cryptids as |cryptid|}}
        {{#xs.option value=cryptid}}{{cryptid.name}}{{/xs.option}}
      {{/each}}
    {{/x-select}}
  </div>
  <div class="form-group">
    <label>Witnesses</label>
    {{#x-select value=model.sighting.witnesses multiple=true class="form-control" as |xs|}}
      {{#each model.witnesses as |witness|}}
        {{#xs.option value=witness}}{{witness.fullName}}{{/xs.option}}
      {{/each}}
    {{/x-select}}
5

I have been running into an issue with EmberX-Select not assigning the value in the x-select components to the model.sightings. I have changed a few things in my solutions and it seems to be working out.

In the file routes/sightings/new.js, I add a couple actions:

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return Ember.RSVP.hash({
      sighting: this.store.createRecord('sighting'),
      cryptids: this.store.findAll('cryptid'),
      witnesses: this.store.findAll('witness')
    });
  },
  sighting: Ember.computed.alias('controller.model.sighting'),
  actions: {
    willTransition() {
      var sighting = this.get('controller.model.sighting');
      if (sighting.get('hasDirtyAttributes')) {
        sighting.deleteRecord();
      }
    },
    create() {
      var self = this;
      this.get('sighting').save().then(function() {
        self.transitionTo('sightings');
      });
    },
    cancel() {
      this.get('sighting').deleteRecord();
      this.transitionTo('sightings');
    },
+    didMakeWitnessSelection(value) {
      this.get('sighting').set('witnesses', value);
    },
+   didMakeCryptidSelection(value) {
      this.get('sighting').set('cryptid', value);
    }
  }
});

In the template templates/sightings/new.hbs I removed the values and added actions to the x-select components:

  <div class="form-group">
    <label for="name">Cryptid</label>
    {{#x-select  action="didMakeCryptidSelection" on="change" class="form-control" as |xs|}}
      {{#xs.option}}Select Cryptid{{/xs.option}}
      {{#each model.cryptids as |cryptid|}}
        {{#xs.option value=cryptid}}{{cryptid.name}}{{/xs.option}}
      {{/each}}
    {{/x-select}}
  </div>
  <div class="form-group">
    <label>Witnesses</label>
    {{#x-select action="didMakeWitnessSelection" on="change" multiple=true class="form-control" as |xs|}}
      {{#each model.witnesses as |witness|}}
        {{#xs.option value=witness}}{{witness.fullName}}{{/xs.option}}
      {{/each}}
    {{/x-select}}
  </div>

This might clear up some issues.

1 Like
7

thanks a lot @tgandee