I am newbie to Stimlus, and planning to attach the treeview to one of my DOM element, and nothing happens.
view code
" class=“treeview” data-controller=“rule” id=“tree” data-target=“rule.tree”>"
controller code
import {treeview} from “bootstrap-treeview”
import { Controller } from “stimulus”
export default class extends Controller {
static targets = [ “tree” ]
connect() {
this.treeview = TreeView({
data: {
text: “Node 1”
}
});
}
}
I am using treeview module listed here
https://github.com/jonmiles/bootstrap-treeview.
I have installed the package using npm inro by node_modules.
Thanks in advance.
Rao
Looking at the docs for that module, it uses jQuery. So you’d have to do something like this:
$(this.treeTarget).treeview( …options go here )
Plus make sure jQuery itself is also loaded.
Thanks for your reply Jared,
I have loaded jQuery in environment.js as
const { environment } = require(’@rails/webpacker’)
const webpack = require(‘webpack’)
environment.plugins.prepend(
‘Provide’,
new webpack.ProvidePlugin({
$: ‘jquery’,
jQuery: ‘jquery’,
jquery: ‘jquery’,
‘window.jQuery’: ‘jquery’,
Popper: [‘popper.js’, ‘default’]
})
)
module.exports = environment
Here is the error message.
Module not found: Error: Can’t resolve ‘bootstrap-treeview’ in ‘C:\New Intake\app\javascript\controllers’
I am not sure what else I am missing.
import {treeview} from “bootstrap-treeview”
import { Controller } from “stimulus”
export default class extends Controller {
static targets = [ “tree” ]
connect() {
$(this.treeTarget).treeview({
data: {
text: "Node 1"
}
});
}
}
I am seeing this error in the console.
Please advise.