Components

Create a simple component
n.set(component_name, function_run_when_load, function_return_html, function_run_when_component_ready)
n.set({
    name: 'button',
    html: n => `<b id="click_now">Clickme!</b>`,
    ready: n => {
        n.on('#click_now', 'click', () => {
          console.log("Hi!")
        })
    }
})
Using components in other components
n.set({
  name: 'news',
  html: n => {
    var text = ""
    articles.forEach(article => {
      text += n.render("articleComp", { data : article })
    })
    return text
  }
})
Load Function:
Asyncronous operations before render
n.set({
  name: 'fetchNews',
  load: (n, render) => {
​
    console.log(`Fetch data from url: ${n.data}`)
    setTimeout(() => {
      var receivedArticles = [
        { title : "Title 1"},
        { title : "Title 2"}
      ]
      render(receivedArticles)
    }, 2000)
​
  },
  html : n => {
    var text = `<div>LATEST NEWS(${n.data.length}):</div>`
    n.data.forEach(article => {
      text += `<div>${article.title}<br></div>`
    })
    return text
  },
  ready : (n, data) => {
    console.log(`Fetch ${n.data.length} articles.`)
  }
})
​
n.render('fetchNews', { element : 'main4', data : 'http://url' })
Create a importable component width require
module.exports = {
  name: 'showName',
  html: n => `YOUR NAME IS ${n.data}`
}
Import component from file
n.load(require('component.js'))
Import multiple components from files
n.load([
  require('component1.js'),
  require('component2.js')
})
Render component
n.render(component_name, object_options)
n.render('news', { element : '#main_page' })
Render component with data
var news_data = [
  { title : 'TITLE 1', 'content' : 'CONTENT 1' },
  { title : 'TITLE 2', 'content' : 'CONTENT 2' }
]
​
n.render('news', { element: '#main_page', data: news_data })
Destroy component and clean div
n.destroy(element_id)
n.destroy('#main_div')

Introduction

DOM Tools

Last modified 3yr ago