n
n
nexo
Search…
Components

Create a simple component

n.set(component_name, function_run_when_load, function_return_html, function_run_when_component_ready)
1
n.set({
2
name: 'button',
3
html: n => `<b id="click_now">Clickme!</b>`,
4
ready: n => {
5
n.on('#click_now', 'click', () => {
6
console.log("Hi!")
7
})
8
}
9
})
Copied!
Using components in other components
1
n.set({
2
name: 'news',
3
html: n => {
4
var text = ""
5
articles.forEach(article => {
6
text += n.render("articleComp", { data : article })
7
})
8
return text
9
}
10
})
Copied!

Load Function:

Asyncronous operations before render
1
n.set({
2
name: 'fetchNews',
3
load: (n, render) => {
4
5
console.log(`Fetch data from url: ${n.data}`)
6
setTimeout(() => {
7
var receivedArticles = [
8
{ title : "Title 1"},
9
{ title : "Title 2"}
10
]
11
render(receivedArticles)
12
}, 2000)
13
14
},
15
html : n => {
16
var text = `<div>LATEST NEWS(${n.data.length}):</div>`
17
n.data.forEach(article => {
18
text += `<div>${article.title}<br></div>`
19
})
20
return text
21
},
22
ready : (n, data) => {
23
console.log(`Fetch ${n.data.length} articles.`)
24
}
25
})
26
27
n.render('fetchNews', { element : 'main4', data : 'http://url' })
Copied!

Create a importable component width require

1
module.exports = {
2
name: 'showName',
3
html: n => `YOUR NAME IS ${n.data}`
4
}
Copied!

Import component from file

1
n.load(require('component.js'))
Copied!

Import multiple components from files

1
n.load([
2
require('component1.js'),
3
require('component2.js')
4
})
Copied!

Render component

n.render(component_name, object_options)
1
n.render('news', { element : '#main_page' })
Copied!
Render component with data
1
var news_data = [
2
{ title : 'TITLE 1', 'content' : 'CONTENT 1' },
3
{ title : 'TITLE 2', 'content' : 'CONTENT 2' }
4
]
5
6
n.render('news', { element: '#main_page', data: news_data })
Copied!

Destroy component and clean div

n.destroy(element_id)
1
n.destroy('#main_div')
Copied!
Last modified 1yr ago