client side data integrity

components.custom-input.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  data: 'Gokul',
  boys: [{name: 'Gokul'}, {name: 'Ragul'}, {name: 'Raj'}],
  girls: [{name: 'Megha'}, {name: 'Rupika'}, {name: 'Priya'}],
  content: Ember.computed.reads('boys'),
  selectedType: 'boys',
  
  actions: {
  	setArr() {
      let type = this.get('selectedType');
      if(type === 'boys') {
        	this.set('content', this.get('girls'));
        this.set('selectedType', 'girls')
      } else {
         	this.set('content', this.get('boys'));
                this.set('selectedType', 'boys')

      }
    },
    
    send() {
      let selectElement = document.querySelector('select');
      let value = selectElement.value;
      let msg;
      if(value === this.get('data')) {
      	msg = 'Integrity passed ✔';
      } else {
      	msg = "Integrity failed ✘";
      }
      alert(`User sees: ${value} \nUnderlying data: ${this.get('data')} \n${msg}`);
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
1) click "send" (integrity will pass) <br>
2) click "Toggle Array" button to set a new array content <br>
3) click "send" (integrity will fail)
<br>
<br>
{{custom-input value=data content=content tagName="span"}}
<button {{action "setArr"}}>Toggle Array</button>

<hr>
<button {{action "send"}}>Send</button>
{{outlet}}
<br>
<br>

templates.components.custom-input.hbs

<select onchange={{action (mut value) value="target.value"}}>
{{#each content as |option|}}
	<option value={{option.name}}>{{option.name}}</option>
{{/each}}
</select>

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