corrspt · August 1, 2018 13:43
diff --git a/controllers.application.js b/controllers.application.js
 import { later } from '@ember/runloop';
 import { Promise } from 'rsvp';
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import RSVP from 'rsvp';

 export default Controller.extend({
  store: service(),
  baseMaterial: null,

  init() {
    this._super(...arguments);
    this.set('baseMaterial', this.get('store').createRecord('base-material'));
  },

  // Actions
  actions: {

    setSpecification(spec) {
      this.set('baseMaterial.specification', spec);
      this.set('specificationsSearched', null);
    },

    suggestSpecification(/*term*/) {
      'Add this';
    },

    createSpecification(/*term*/) {
      // Can be empty, does not need to work
    },

    searchSpecification(/*term*/) {
      let results = [];
      results.push(this.get('store').createRecord('base-material-specification', {
        'specification': 'SA 1008',
      }));
      results.push(this.get('store').createRecord('base-material-specification', {
        'specification': 'SA 1010',
      }));
      this.set('results', results);
      return new RSVP.Promise((resolve, reject) => {
        this.createSlowPromise(results).then((materials) => {
          resolve(materials);
        }, reject);
      });
    },

    showWhenCreateSpec() {
      let specs = this.get('specificationsSearched');
      if (specs != null) {
        if (specs.get('length') === 0) {
          return true;
        }
      }
      return false;
    }
  },

  createSlowPromise(results) {
    return new Promise(function(resolve) {
      later(() => resolve(results), 100);
    });
  },
 });
diff --git a/models.base-material-specification.js b/models.base-material-specification.js
 import DS from 'ember-data';

 export default DS.Model.extend({
  specification: DS.attr('string')
 });
diff --git a/models.base-material.js b/models.base-material.js
 import DS from 'ember-data';

 export default DS.Model.extend({
  specification: DS.belongsTo('base-material-specification')

 });
diff --git a/styles.app.css b/styles.app.css
 body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
 }
diff --git a/templates.application.hbs b/templates.application.hbs
 <p>Search for SA and select SA 1010 (or 1008) and watch the model be populated with the correct value and the trigger for power-select-with-create does <strong>NOT</strong> show the value (but will show on the regular power-select)</p>
 <h2>Does not work (power-select-with-create)</h2>
 <pre>
      searchEnabled=true
      allowClear=false
      selected=baseMaterial.specification
      onchange=(action 'setSpecification')
      search=(action 'searchSpecification')
      triggerClass=(concat 'form-control ' cssTriggerClass)
      oncreate=(action 'createSpecification')
      showCreateWhen=(action 'showWhenCreateSpec')
      buildSuggestion=(action 'suggestSpecification')
 </pre>
 {{#power-select-with-create
      searchEnabled=true
      allowClear=false
      selected=baseMaterial.specification
      onchange=(action 'setSpecification')
      search=(action 'searchSpecification')
      triggerClass=(concat 'form-control ' cssTriggerClass)
      oncreate=(action 'createSpecification')
      showCreateWhen=(action 'showWhenCreateSpec')
      buildSuggestion=(action 'suggestSpecification')
      id='with-create'
      placeholder='Search for SA and select one of the values, it does not show up in the trigger component'
 as |option|}}
 {{option.specification}}
 {{/power-select-with-create}}
 <h2>Works (regular power-select, same options)</h2>
 <pre>
      searchEnabled=true
      allowClear=false
      selected=baseMaterial.specification
      onchange=(action 'setSpecification')
      search=(action 'searchSpecification')
      as |option|
 </pre>
 {{#power-select
      searchEnabled=true
      allowClear=false
      selected=baseMaterial.specification
      onchange=(action 'setSpecification')
      search=(action 'searchSpecification')
      id='power-select'
      placeholder='This is a regular power-select and works correctly'
 as |option|}}
 {{option.specification}}
 {{/power-select}}


 <h2>Model Content (property = baseMaterial.specification.specification)</h2>
 {{baseMaterial.specification.specification}}

 <div id="ember-basic-dropdown-wormhole"></div>
diff --git a/twiddle.json b/twiddle.json
 {
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.2.0",
    "ember-power-select-with-create": "0.6.0"
  }
 }
	import { later } from '@ember/runloop';
	import { Promise } from 'rsvp';
	import Controller from '@ember/controller';
	import { inject as service } from '@ember/service';
	import RSVP from 'rsvp';

	export default Controller.extend({
	store: service(),
	baseMaterial: null,

	init() {
	this._super(...arguments);
	this.set('baseMaterial', this.get('store').createRecord('base-material'));
	},

	// Actions
	actions: {

	setSpecification(spec) {
	this.set('baseMaterial.specification', spec);
	this.set('specificationsSearched', null);
	},

	suggestSpecification(/term/) {
	'Add this';
	},

	createSpecification(/term/) {
	// Can be empty, does not need to work
	},

	searchSpecification(/term/) {
	let results = [];
	results.push(this.get('store').createRecord('base-material-specification', {
	'specification': 'SA 1008',
	}));
	results.push(this.get('store').createRecord('base-material-specification', {
	'specification': 'SA 1010',
	}));
	this.set('results', results);
	return new RSVP.Promise((resolve, reject) => {
	this.createSlowPromise(results).then((materials) => {
	resolve(materials);
	}, reject);
	});
	},

	showWhenCreateSpec() {
	let specs = this.get('specificationsSearched');
	if (specs != null) {
	if (specs.get('length') === 0) {
	return true;
	}
	}
	return false;
	}
	},

	createSlowPromise(results) {
	return new Promise(function(resolve) {
	later(() => resolve(results), 100);
	});
	},
	});
	import DS from 'ember-data';

	export default DS.Model.extend({
	specification: DS.attr('string')
	});
	import DS from 'ember-data';

	export default DS.Model.extend({
	specification: DS.belongsTo('base-material-specification')

	});
	body {
	margin: 12px 16px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 12pt;
	}
	<p>Search for SA and select SA 1010 (or 1008) and watch the model be populated with the correct value and the trigger for power-select-with-create does <strong>NOT</strong> show the value (but will show on the regular power-select)</p>
	<h2>Does not work (power-select-with-create)</h2>
	<pre>
	searchEnabled=true
	allowClear=false
	selected=baseMaterial.specification
	onchange=(action 'setSpecification')
	search=(action 'searchSpecification')
	triggerClass=(concat 'form-control ' cssTriggerClass)
	oncreate=(action 'createSpecification')
	showCreateWhen=(action 'showWhenCreateSpec')
	buildSuggestion=(action 'suggestSpecification')
	</pre>
	{{#power-select-with-create
	searchEnabled=true
	allowClear=false
	selected=baseMaterial.specification
	onchange=(action 'setSpecification')
	search=(action 'searchSpecification')
	triggerClass=(concat 'form-control ' cssTriggerClass)
	oncreate=(action 'createSpecification')
	showCreateWhen=(action 'showWhenCreateSpec')
	buildSuggestion=(action 'suggestSpecification')
	id='with-create'
	placeholder='Search for SA and select one of the values, it does not show up in the trigger component'
	as \|option\|}}
	{{option.specification}}
	{{/power-select-with-create}}
	<h2>Works (regular power-select, same options)</h2>
	<pre>
	searchEnabled=true
	allowClear=false
	selected=baseMaterial.specification
	onchange=(action 'setSpecification')
	search=(action 'searchSpecification')
	as \|option\|
	</pre>
	{{#power-select
	searchEnabled=true
	allowClear=false
	selected=baseMaterial.specification
	onchange=(action 'setSpecification')
	search=(action 'searchSpecification')
	id='power-select'
	placeholder='This is a regular power-select and works correctly'
	as \|option\|}}
	{{option.specification}}
	{{/power-select}}


	<h2>Model Content (property = baseMaterial.specification.specification)</h2>
	{{baseMaterial.specification.specification}}

	<div id="ember-basic-dropdown-wormhole"></div>
	{
	"version": "0.15.0",
	"EmberENV": {
	"FEATURES": {}
	},
	"options": {
	"use_pods": false,
	"enable-testing": false
	},
	"dependencies": {
	"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
	"ember": "3.2.2",
	"ember-template-compiler": "3.2.2",
	"ember-testing": "3.2.2"
	},
	"addons": {
	"ember-data": "3.2.0",
	"ember-power-select-with-create": "0.6.0"
	}
	}