Reference to element in the component about framework HOT 5 CLOSED

Sure, here is a copy-paste example.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://www.nx-framework.com/downloads/nx-beta.2.0.0.js"></script>
<script>
nx.components.app()
  .use((elem, state) => {
    let el = $(elem)
    el.show()
    el.find('#container').addClass('change-color')
  })
  .register('my-app')
</script>

<my-app>
  <div id="container">hello there!</div>
</my-app>

Just copy it into an empty HTML file and open it with your preferred browser. I never used jQuery, but I am pretty sure that you can combine it howerver you want with NX without issues.

from framework.

One small note:

The nx.component({ template: '' }) snippet won't work. If you would like to pass a template, you must use a component which uses the render middleware internally or you must add the middleware to the bare component by hand. The following two are equivalent.

nx.components.rendered({ template: ' ' })
  .register('my-comp')

nx.component()
  .use(nx.middlewares.render({ template: ' ' }))
  .register('my-comp')

Alternatively you can use the app, page, display or control components instead of rendered as they all use the render middleware internally (among with many others.)

I hope this makes sense, it might take some time to get used to this. To get some idea about the components you could check the source of some here. They are all a few lines long only.

Edit: you can find the docs for components here

from framework.

All middlewares added with the component.use method have 3 parameters. The first parameter is the actual DOM element. (The component instance is a Web Component, which is a vanilla DOM element). You are free to use any of the native DOM apis on the element. NX is designed to work with post hooks only, so no native hack or other framework should break it (:

Edit: this is a super simple example

nx.component()
  .use((elem, state) => {
    elem.addEventListener('click', myHandler)
  })
  .register('my-comp')

from framework.

Thx for the feedback btw. I plan to do a docs revamp in the future, I will make sure to clarify this. 👍

from framework.

Thanks for example. Could I just then wrap the element using jQuery

nx.component({ template: '<div id="container">hello there!</div>'})
  .use((elem, state) => {
    let el = $(elem);
    el.show();
    el('#container').addClass('change-color');
    elem.addEventListener('click', myHandler)
  })
  .register('my-comp')

will this example work?

from framework.