Comment on page
Component
Most WireBootstrap components inherit from
wire.ui.Component. This class gives components the base functionality needed to take advantage of the capabilities of the WireBootstrap framework. It internalizes much of the details for development teams building new components for WireBootstrap. It also provides a standard interface for teams working with components as they develop applications using WireBootstrap.Components that inherit from
wire.ui.Component are JavaScript classes or functions which allow new instances of them to be created. By convention, each is defined on the root global object wire although this is not a requirement.const datatable = new wire.datatables();
Larger collections of components from the same vendor may also create a root namespace on the
wire global and then create components inside that root.const kpi = new wire.gentelella.kpiCompare();
The
render method is called to initialize a component which includes binding to data, applying any configuration, attaching to a DOM element, and then sending out event notifications that its finished initializing. The
render method takes two parameters. The first is the element id into which the component will be rendered. The second parameter is the configuration for initialing the component.The example below creates a new instance of the DataTables for WireBootstrap component and renders it inside an element with the id
table.const datatable = new wire.datatables();
datatable.render("#table", {
...
});
The
render method returns the instance of the component so it can be chained with the component constructor for convenience.const datatable = new wire.datatables().render("#table", {
...
});
Most components have default configuration settings that can be overridden by passing a configuration into the
render method. One of the operations performed in the render method is the merging of the configuration passed in with the components defaults. The config method on a component will return this merged configuration. In the example below, the configuration for an instance of the DataTables for WireBootstrap component is pulled and its
selectAll value is written to the browser's developer tools console.let config = datatable.config();
console.log(config.selectAll);
The data configuration for a component determines where the component will get its data. Often times, this requires that a query be run in a data service. Once this is resolved, the data is transformed into a WireBootstrap DataTable and made available to the component for presentation. The
data method on the component can be used to access this data table....
let table = datatable.data();
Use the
element method of a component to get a reference to the DOM object to which the component is bound. If the component uses jQuery for the element, you can get the jQuery version using the$element method. ...
let el = datatable.element();
el = datatable.$element();
The WireBootstrap components that wrap the plugins used in themes expose references to the plugin used internally by the component so the methods and properties of the native plugin can be used directly.
Use the
plugin property of a component to get a reference to the internal plugin instance used by the component.The following example sets the internal DataTables plugin instance used by the DataTables for WireBootstrap component into a variable called
plugin. It then gets an array of the currently selected rows using the native DataTables API.const datatables = new wire.datatables({
...
});
const plugin = datatables.plugin;
const rows = plugin.rows({ selected: true }).data().toArray();
Many of the plugin functions like the one above are simplified in the WireBootstrap components that extend them.
In the example above, the same data can be accessed via the
getSelectedRows method on the DataTables for WireBootstrap component directly....
const rows = datatables.getSelectedRows();
For components that send out data events, this behavior can be turned off by setting the
dataevent property.const select = new wire.select2();
select2.render("#select", {
dataevent: false
});
Last modified 2yr ago