Simple event driven View
npm install event-driven-view
View is basic 'brick' of framework. Use it to show and control content on page.
To render HTML template inside element use show:
let view = new View({
rootEl: docEl,
template: '<div><a>Hello World</a></div>'
})
view.show()View options:
- rootEl: element to which view will be attached
- element: view can be wrapped inside element, new element will be rootEl after render
- classList: list of classes which will be added to root element
- template: HTML template
- model: instance of observable-model
- templateData: data passed for template parsing
- ui: elements for controlling view and rendering childviews every view after render has 'rootEl' ui element
- uiEvents: array of UI events
View can show another View inside itself or in choosen element.
let view = new View({
rootEl: this.rootEl,
ui: {
uiElement: '.ui-element'
},
template: '<div><div class="ui-element"></div></div>'
}),
childView = new View({
template: '<a></a>'
})
view.render()
view.show('uiElement', childView)
// HTML: '<div><div class="ui-element"><a></a></div></div>'Ui elements are accesible after render.
let view = new View({
rootEl: this.rootEl
}),
childView = new View({
template: '<a></a>'
})
view.render()
view.show(childView)
// HTML: '<a></a>'
view.show(childView, 'p')
// HTML: '<p><a></a></p>'View can show another view inside of view instead of using template. You can wrap child view inside of element(optional)
View can render collection of elements:
let view = new View({
rootEl: this.rootEl,
ui: {
uiElement: '.ui-element'
},
template: '<div><div class="ui-element"></div></div>'
}),
childViewArray = [new View({
template: '<a></a>'
}), new View({
template: '<p></p>'
})]
view.render()
view.show('uiElement', childViewArray)
// HTML: '<div><div class="ui-element"><a></a><p></p></div></div>'To prevent rendering multiple views with the same rootEl use element argument. Child Views will be wrapped into new elements. If child view has own element, show will use childView.element instead of element argument.
let view = new View({
rootEl: this.rootEl,
ui: {
uiElement: '.ui-element'
},
template: '<div><div class="ui-element"></div></div>'
}),
childViewArray = [new View({
template: ''
}), new View({
template: ''
})]
view.render()
view.show('uiElement', childViewArray, 'p')
// HTML: '<div><div class="ui-element"><p></p><p></p></div></div>'View can remove child view by selecting ui element or passing child View object. If ui element has collection of views all will be removed.
view.removeChild('uiElement')view.removeChild(childView)View can attach event listeners to UI elements
let view = new View({
rootEl: this.rootEl,
ui: {
link: '.link',
linkSecond: '.link_second'
}
uiEvents: {
'click @link': 'onLinkClick',
'click @linkSecond false': function () {
console.log('click')
}
},
onLinkClick: function () {
return 'text'
}
})
/*
Eq to:
view.getUI('link').addEventListener('click', view.onLinkClick)
view.getUI('linkSecond').addEventListener('click, function ..., false)
*/View can use <$ variable /> syntax to pass data into template.
Data for template comes from View.templateData or from view.model.
Data is kept inside Model more info: src/Model/README.md
All data from model is visible inside template.
let view.model = new Model({
getSurname: function () {
let variable = {
el: 'Brand'
}
return variable['el']
},
proffesion: {
name: 'Plumber'
}
}),
view.templateData = {
name: 'John',
showName: true
}
view.template = '<div><div class="ui-element"><$ name /> <$ getSurname() /> <$ proffesion.name /></div></div>'
view.render()
// HTML: '<div><div class="ui-element">John Brand Plumber</div></div>'UI component from getUI method extends document Element by new methods. Available UI methods:
let ui = view.getUI('selector')
ui.removeClass('className')
ui.addClass('className')
ui.toogleClass('className')Every rendered view has 'rootEl' UI!
Look test folder for more examples
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent