Skip to content

Instantly share code, notes, and snippets.

@wonderful123
Created June 25, 2018 00:40
Show Gist options
  • Save wonderful123/3f7f7d6e2ab879e062064d70a3af28a6 to your computer and use it in GitHub Desktop.
Save wonderful123/3f7f7d6e2ab879e062064d70a3af28a6 to your computer and use it in GitHub Desktop.
each-in binding
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
options: {
product_name: "bananas",
id: 12,
price: 1.50
},
actions: {
showOptions() {
const prettyOptions = syntaxHighlight(this.options);
this.set('prettyHtmlOptions', prettyOptions);
}
},
});
function syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
<link rel="stylesheet" href="https://bootswatch.com/4/minty/bootstrap.min.css">
{{#each-in options as |key value|}}
<div class="form-group">
<label>{{key}}</label>
{{input type="text" class="form-control" value=value}}
</div>
{{/each-in}}
<button {{action "showOptions"}}>Display Options Object</button>
<br><br>
{{{prettyHtmlOptions}}}
{
"version": "0.14.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": "2.18.2",
"ember-template-compiler": "2.18.2",
"ember-testing": "2.18.2"
},
"addons": {
"ember-data": "2.18.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment