Simplifying the process of binding DOM nodes to JavaScript functions
npm install viewloaderA teensy package that simplifies the process of binding DOM nodes to JavaScript functions. It does this by creating a convention for mapping between the DOM and your JavaScript and ensures that only the functions for the components in the DOM are executed.
```
% npm install --save viewloader
To build a standalone version:
``
% npm run build
`html`
`js
// bar-chart.js
export default function myBarChart (el, props) {
console.log(el, props); //=> div {data: [1,2,3]}
return {
reset: () => { ... },
destroy: () => { ... }
}
};
`
`js
// index.js
import viewloader from "viewloader";
import myBarChart from "./bar-chart";
import myLineChart from "./line-chart";
const views = {
myBarChart,
myLineChart
};
// Create the instance
const manager = viewloader(views);
// Call the view functions
manager.callViews();
// Call the reset methods of each view functiondestroy
manager.resetViews();
// Call the methods of each view function`
manager.resetViews();
``
viewloader(views, scope, includeScope);
* views — An object of view functions mapped to data-view-[name] attributes. (Required)element
* scope — An or nodelist to scope the view loader to. (Optional. Defaults to document)boolean
* includeScope — A to indicate if the scoped element should be included in the scoped views. (Optional: Defaults to false)
Viewloader supports view functions that return a Promise, automatically setting the resolved return value from any promises once that value is resolved. This means you can call viewloader synchronously with underlying code in your views that is asynchronous:
`js
import viewloader from "viewloader";
const views = {
asyncView: (el, props) => {
return import("./async-import")
.then((asyncImport) => {
return asyncImport(el, props);
});
}
}
``