Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ember Vue Component API
import vue from '../utils/vue';
export default vue({
data() {
return {
name: 1,
items: [],
james: {
name: 12
}
}
},
watch: {
name() {
console.log('name changed');
}
},
computed: {
fullName() {
return 'full ' + this.name;
}
},
methods: {
click() {
this.name++;
this.items.push(Date.now());
const j = this.james;
this.james = Object.assign({}, j, { name: Date.now() }) ;
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
{{this.name}}
{{this.james.name}}
{{input value=this.name}}
{{this.user.name}} & {{this.user.age}}
<button {{action 'click' }} type="button">Click</button>
{{fullName}}
<ul>
{{#each this.items as |item|}}
<li>i: {{item}}</li>
{{/each}}
</ul>
{
"version": "0.15.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.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-data": "3.4.2"
}
}
import { computed, observer, set } from '@ember/object';
import Component from '@ember/component';
const noop = function() {};
let handler = {
get(target, name) {
if (typeof target[name] === 'object' && target[name] !== null) {
return new Proxy(target[name], handler);
}
return target[name];
},
set(target, name, value) {
set(target, name, value);
return true;
},
has(target, name) {
return name in target;
}
};
export default function toEmberComponent(input) {
const defaultData = {
beforeCreate: input.beforeCreate || noop,
beforeUpdate: input.beforeUpdate || noop,
beforeDestroy: input.beforeDestroy || noop,
beforeMounted: input.beforeMounted || noop,
created: input.created || noop,
mounted: input.mounted || noop,
updated: input.updated || noop,
destroyed: input.destroyed || noop,
tagName: '',
willDestroyElement() {
this.beforeDestroy();
},
didDestroyElement() {
this.destroyed();
},
init() {
this.beforeCreate();
this._super(...arguments);
this.dataKeys = {};
if (typeof input.data === 'object') {
this.dataKeys = JSON.parse(JSON.stringify(input.data));
} else if (typeof input.data === 'function') {
this.dataKeys = input.data();
}
this.setProperties(this.dataKeys);
this.created();
this.beforeMounted();
},
willUpdate() {
this.beforeUpdate();
this.triggerComputeds();
},
didInsertElement() {
this.mounted();
},
didRender() {
this.updated();
},
triggerComputeds() {
Object.keys(input.computed).forEach((key) => {
this.notifyPropertyChange(key);
});
},
actions: input.actions || input.methods || {}
}
if (input.template) {
defaultData.layout = input.template;
}
Object.keys(defaultData.actions).forEach((actionName) => {
const originalAction = defaultData.actions[actionName]
defaultData.actions[actionName] = function(...args) {
originalAction.apply(new Proxy(this, handler), args);
}
});
Object.keys(input.watch).forEach((propName) => {
defaultData['_ob_' + propName] = observer(propName, input.watch[propName]);
});
Object.keys(input.computed).forEach((propName) => {
defaultData[propName] = computed(input.computed[propName]).volatile();
});
return Ember.Component.extend(defaultData);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.