Skip to content

Instantly share code, notes, and snippets.

@nishanmiranda

nishanmiranda/components.custom-input.js

Forked from gokatz/components.custom-input.js
Last active July 5, 2018 07:10
Show Gist options
  • Save nishanmiranda/2e0544f2edc1c05fb924ed75877d9b49 to your computer and use it in GitHub Desktop.
Save nishanmiranda/2e0544f2edc1c05fb924ed75877d9b49 to your computer and use it in GitHub Desktop.
Download ZIP
client side data integrity
Raw
components.custom-input.js
import Ember from 'ember';
export default Ember.Component.extend({
});
Raw
controllers.application.js
import Ember from 'ember';
import { typeOf } from '@ember/utils';
export default Ember.Controller.extend({
init() {
this._super(...arguments);
let model = {};
Object.defineProperty(model, 'data', {
writable: false,
configurable: true,
value: 'Goku'
});
this.set('model', model);
Ember.onerror = function(error) {
if (typeOf(error) === 'error') {
alert(error);
}
}
},
appName: 'Ember Twiddle',
actions: {
focusIn(property) {
Object.defineProperty(this.get('model'), property, {
writable: true
});
},
focusOut(property) {
Object.defineProperty(this.get('model'), property, {
writable: false
});
},
change() {
this.set('model.data', this.get('model.data') + this.get('model.data'));
},
send() {
alert(`${this.get('model.data')} is sent to server`);
}
}
});
Raw
templates.application.hbs
<h1>Welcome to {{appName}}</h1>
<br>
<br>
Name(immutable): {{input value=model.data focusOut=(action "focusOut" "data") focusIn=(action "focusIn" "data")}}
{{!--<button {{action "focusIn"}}>Change as writable</button>
<button {{action "focusOut"}}>Change as not-writable</button>--}}
<br><br>
<button {{action "send"}}>Send</button>
<br><br><br>
This `change` function tries to change the `name` value.
An error will be thrown since it is read-only.
<br><br>
<button {{action "change"}}>Change</button>
<br><br>
We can catch this error while implementing in the app and send it as error log.
{{outlet}}
<br>
<br>
Raw
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>
Raw
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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment