nuejs / nue

A web framework for UX developers
https://nuejs.org
MIT License
6.03k stars 181 forks source link

Q: how to reander server component whith some event handle? #106

Closed JavanFeng closed 8 months ago

JavanFeng commented 9 months ago

hi,I'm a beginer for nuejs. when use create-nue project for learning. I found render.js ignore @xxx handle, but sometime for ssr,the server component will has some js. this is a demo exsample:

<header @mounseleave="closeMenu">
        // .... someelse info
       <a @mouseenter>menu1</a>
       // ...
</header>

like above, how can I add some js function to this server component,if dont use client component or [Isomorphic components]?

tipiirai commented 9 months ago

Looks like there is a typo on the "@mounseleave". It should be "@mouseleave". Does that help?

JavanFeng commented 9 months ago

Looks like there is a typo on the "@mounseleave". It should be "@mouseleave". Does that help?

but it still don't work. I will provide more detail(create_nue):

I put the server component in components.nue

<!-- menu header -->
<header @name="nav-header" class="navHeader" @click="log">
  <ul class="navHeader-bar">
    <li class="navHeader-menu">
      <div class="navHeader-menu-item" :for="(item, index)  in menus">
          <a>{item}</a>
      </div>
      // some else
    </li>
  </ul>
  <script>
    log(){
      console.log('click it')
    }
  </script>
</header>

then use it in layout.nue,run npm run start. the click function will not work in the page all right? what I want to know is how to bind js function for server component?

tipiirai commented 8 months ago

The code looks solid. Hard to debug without a live demo. Can you try out with the new version / Nuekit? There was a huge update today: https://nuejs.org/blog/nuekit-010/

JavanFeng commented 8 months ago

The code looks solid. Hard to debug without a live demo. Can you try out with the new version / Nuekit? There was a huge update today: https://nuejs.org/blog/nuekit-010/ I tried the nuekit. it's easier to use! But I have some questions:

  1. nuekit seems no global file for rendering common server components?
  2. now, I realized nue using Islnads Architecture. so If I want to add Interactivity to the page, I have to create one client compoent,or right?

thanks for answering : )

tipiirai commented 8 months ago

To answer the first point. You can define global server components on the root and app level layout.html. For example:

<!-- the global header -->
<header>
  <!-- use a custom component -->
  <my-component/>
</header>

<!-- define a custom component -->
<div @name="my-component">
  <p>Render something</p>
</div>

There will be more ways to define and render components after the release of Nuemark