Component¶
- Component is an isolated part of application, it has own change detector.
- Component has an isolated scope.
- Defined properties (:rating, :max in example below) are transferred to scope of component.
- You can choose a template returning template/templateId/templateUrl.
- Events onStart and onDestroy.
- If you use a prefix for name, then it throw error if a component doesn’t exist (e.g. al-component).
- You can expose api from component
- Type of watchers for props: copy, array, deep and true (or empty).
Syntax¶
alight.component('rating', (scope, element, env) => {
return {
template,
templateId,
templateUrl,
props,
onStart,
onDestroy,
api
};
})
Example of componenet¶
<rating :rating="rating" :max="max" @change="rating=$value"></rating>
Example of componenet¶
alight.component('rating', (scope, element, env) => {
scope.change = (value) => scope.$dispatch('change', value)
return {template: `<ul class="rating"><li al-repeat="_ in max" al-class="filled: $index<rating" @click="change($index+1)">\u2605</li></ul>`};
})
If you want to define callback on property change or change type of observing of a property, you can do this in “props”
Configuring properties¶
alight.component('somecomponent', (scope, element, env) => {
return {
props: {
prop0: function(value) {},
prop1: {
watchMode: 'array'
},
prop2: {
watchMode: 'deep',
onChange: function(value) {}
}
}
};
})
Props as list¶
alight.component('somecomponent', (scope, element, env) => {
return {
props: ['prop1', 'prop2']
};
})