Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save v1valasvegan/b004b131ed46414d70d38b12e27cff19 to your computer and use it in GitHub Desktop.
Save v1valasvegan/b004b131ed46414d70d38b12e27cff19 to your computer and use it in GitHub Desktop.
New Twiddle
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
class ReactivePart {
constructor(placeholder) {
this.value = placeholder.replace('{{', '').replace('}}','');
this.placeholder = placeholder;
}
get isEditable() {
return this.placeholder.startsWith('{{');
}
@tracked value;
toString() {
return this.isEditable ? `{{${this.value}}}` : this.value;
}
}
export default class extends Component {
weakParts = new WeakMap();
get parts() {
const substitutions = this.args.template;
if (!this.weakParts.has(substitutions)) {
this.weakParts.set(
substitutions,
substitutions.map((placeholder) => new ReactivePart(placeholder))
)
}
return this.weakParts.get(substitutions);
}
get newTemplate() {
return this.parts.map(e=>e.value && e.toString()).join(' ');
}
}
import Controller from '@ember/controller';
export default class ApplicationController extends Controller {
tpl = "hero {{1}} bora {{2}} herobora {{1}}";
get template() {
return this.tpl.split(' ');
}
}
<select>
<MyComponent @template={{this.template}} />
<br>
{{@template}}
<br><br><br>
{{#each this.parts as |part|}}
{{#if part.isEditable}}
<Input @value={{part.value}} />
{{else}}
{{part.value}}
{{/if}}
{{/each}}
<br><br><br>
{{this.newTemplate}}
{
"version": "0.17.1",
"EmberENV": {
"FEATURES": {},
"_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
"_APPLICATION_TEMPLATE_WRAPPER": true,
"_JQUERY_INTEGRATION": true
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
"ember": "3.18.1",
"ember-template-compiler": "3.18.1",
"ember-testing": "3.18.1"
},
"addons": {
"@glimmer/component": "1.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment