n
n
nexo
Search…
Project demo

Demo project using Webpack && Expressjs and Nexo:

Webpack configuration:

1
var path = require("path")
2
module.exports = {
3
entry: {
4
app: ["./src/main.js"]
5
},
6
output: {
7
path: path.resolve(__dirname, "assets/js"),
8
publicPath: "/assets/",
9
filename: "bundle.js"
10
}
11
}
Copied!

src/index.html

1
<html>
2
<head>
3
<script src="/assets/js/bundle.js"></script>
4
<title>nexo demo</title>
5
</head>
6
<body>
7
<div id="filters"></div>
8
<div id="main"></div>
9
</body>
10
</html>
Copied!

src/main.js

1
const n = require('nexo')
2
const clients = [
3
{ userId: 0, userName: 'Name', type: 'OPEN' },
4
{ userId: 1, userName: 'Name2', type: 'CLOSE' },
5
{ userId: 2, userName: 'Name3', type: 'CLOSE' }
6
]
7
8
n.load([
9
require('./list/list.js'),
10
require('./client/client.js'),
11
require('./filters/filters.js')
12
])
13
14
n.ready(() => {
15
n.render('list', 'main', { element: '#main', data: clients })
16
n.render('filters', { element: '#filters' })
17
})
Copied!

Component list ('src/list/list.js')

1
module.exports = {
2
name: 'list',
3
html: n => {
4
if (n.empty(n.data)) return "NOT FOUND CLIENTS"
5
var text = `<table>`
6
n.data.forEach(client => {
7
text += n.render('client', { data: client })
8
})
9
text += `</table>`
10
return text
11
}
12
}
Copied!

Component client ('src/client/client.js')

1
module.exports = {
2
name: 'client',
3
html: n => `
4
<tr id="client-${n.data.id}">
5
<td>
6
${n.data.userId}
7
</td>
8
<td>
9
${n.data.userName}
10
</td>
11
<td>
12
${n.data.type}
13
</td>
14
</tr>`,
15
ready : n => {
16
n.on(`#client-${n.data.id}`, 'click', () => {
17
console.log(`click client: ${n.data.userName}`)
18
})
19
}
20
}
Copied!

Component filter ('src/filter/filter.js')

1
module.exports = {
2
name: 'filters',
3
html: n => `
4
Filter name: <input type="text" id="name">
5
Filter STATUS:
6
<select id="type">
7
<option value="">ALL</option>
8
<option value="OPEN">OPEN</option>
9
<option value="CLOSE">CLOSE</option>
10
</select>
11
`,
12
ready : n => {
13
const filter = () => {
14
n.model.filter('clients', { userName : n.id('nombre').value type : n.id('type').value })
15
}
16
17
n.on('#name', 'keyup', filter)
18
n.on('#type', 'change', filter)
19
}
20
}
Copied!
Last modified 1yr ago