rwjblue · July 21, 2021 08:01
diff --git a/controllers.application.js b/controllers.application.js
 import Controller from '@ember/controller';
 import { computed } from '@ember/object';

 const values = [
 	0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
 ];

 export default Controller.extend({
  sliderIndex: 1,

  values: computed('sliderIndex', function() {
    return values.map((v, index) => {
      const value = v;
      const selected = parseInt(this.get('sliderIndex'), 10) === index;
      
      if (selected)
        console.error(value);

      return { value, selected };
    });
 	}).readOnly(),
 });
diff --git a/modifiers.prop\.js b/modifiers.prop\.js
 import { setModifierManager, capabilities } from '@ember/modifier';

 function setProps(element, properties) {
  for (let key in properties) {
    element[key] = properties[key];
  }
 }

 export default setModifierManager(
  () => ({
    capabilities: capabilities('3.13', { disableAutoTracking: true }),

    createModifier() {
      return {
        element: null
      };
    },

    installModifier(state, element, args) {
      state.element = element;
      
 			setProps(element, args.named);
    },

    updateModifier(state, args) {
      setProps(state.element, args.named);
    },
    destroyModifier() {},
  }),
  
  class PropModifier {}
 );
diff --git a/templates.application.hbs b/templates.application.hbs
 <h2>{{sliderIndex}}</h2>
 {{input type="range" min="0" max="10" value=this.sliderIndex}}

 <select value="target.value">
  {{#each this.values as |value index|}}
    <option value="{{index}}"
      {{prop selected=value.selected}}>
    {{value.value}} {{value.selected}}
    </option>
  {{/each}}
 </select>
diff --git a/tests.helpers.destroy-app.js b/tests.helpers.destroy-app.js
 import Ember from 'ember';

 export default function destroyApp(application) {
  Ember.run(application, 'destroy');
 }
diff --git a/tests.helpers.resolver.js b/tests.helpers.resolver.js
 import Resolver from '../../resolver';
 import config from '../../config/environment';

 const resolver = Resolver.create();

 resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
 };

 export default resolver;
diff --git a/tests.helpers.start-app.js b/tests.helpers.start-app.js
 import Ember from 'ember';
 import Application from '../../app';
 import config from '../../config/environment';

 const { run } = Ember;
 const assign = Ember.assign || Ember.merge;

 export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
 }
diff --git a/tests.test-helper.js b/tests.test-helper.js
 import resolver from './helpers/resolver';
 import {
  setResolver
 } from 'ember-qunit';

 setResolver(resolver);
diff --git a/twiddle.json b/twiddle.json
 {
  "version": "0.12.1",
  "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.17.0",
    "ember-template-compiler": "3.17.0",
    "ember-testing": "3.17.0"
  }
 }
	import Controller from '@ember/controller';
	import { computed } from '@ember/object';

	const values = [
	0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
	];

	export default Controller.extend({
	sliderIndex: 1,

	values: computed('sliderIndex', function() {
	return values.map((v, index) => {
	const value = v;
	const selected = parseInt(this.get('sliderIndex'), 10) === index;

	if (selected)
	console.error(value);

	return { value, selected };
	});
	}).readOnly(),
	});
	import { setModifierManager, capabilities } from '@ember/modifier';

	function setProps(element, properties) {
	for (let key in properties) {
	element[key] = properties[key];
	}
	}

	export default setModifierManager(
	() => ({
	capabilities: capabilities('3.13', { disableAutoTracking: true }),

	createModifier() {
	return {
	element: null
	};
	},

	installModifier(state, element, args) {
	state.element = element;

	setProps(element, args.named);
	},

	updateModifier(state, args) {
	setProps(state.element, args.named);
	},
	destroyModifier() {},
	}),

	class PropModifier {}
	);
	<h2>{{sliderIndex}}</h2>
	{{input type="range" min="0" max="10" value=this.sliderIndex}}

	<select value="target.value">
	{{#each this.values as \|value index\|}}
	<option value="{{index}}"
	{{prop selected=value.selected}}>
	{{value.value}} {{value.selected}}
	</option>
	{{/each}}
	</select>
	import Ember from 'ember';

	export default function destroyApp(application) {
	Ember.run(application, 'destroy');
	}
	import Resolver from '../../resolver';
	import config from '../../config/environment';

	const resolver = Resolver.create();

	resolver.namespace = {
	modulePrefix: config.modulePrefix,
	podModulePrefix: config.podModulePrefix
	};

	export default resolver;
	import Ember from 'ember';
	import Application from '../../app';
	import config from '../../config/environment';

	const { run } = Ember;
	const assign = Ember.assign \|\| Ember.merge;

	export default function startApp(attrs) {
	let application;

	let attributes = assign({rootElement: "#test-root"}, config.APP);
	attributes = assign(attributes, attrs); // use defaults, but you can override;

	run(() => {
	application = Application.create(attributes);
	application.setupForTesting();
	application.injectTestHelpers();
	});

	return application;
	}
	import resolver from './helpers/resolver';
	import {
	setResolver
	} from 'ember-qunit';

	setResolver(resolver);
	{
	"version": "0.12.1",
	"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.17.0",
	"ember-template-compiler": "3.17.0",
	"ember-testing": "3.17.0"
	}
	}