kbrsh/moon

how to use <other-component> in another component template: ` ? ` ?

sadeghbarati opened this issue · 4 comments

sadeghbarati commented

for understanding more i include example

i have home.js and home.js include components like header sidebar main and footer

each component a separate file is created by Moon.component and linked in one script and exported for import in home.js

home.js

import Moon from 'moonjs'
import { Header, Main, Sidebar, Footer } from './homeComponents/index'

export const Home = Moon.component('Home', {
  template: `<Header></Header>
             <Main></Main>
             <Sidebar></Sidebar>
             <Footer></Footer>`
})

my qustion is about home js template: `` how to use another component inside it

app.js

import Moon from 'moonjs'
import MoonRouter from 'moon-router'
import { Home } from './pages/home'

const app = new Moon({
  el: "#app",
})

index.html

<!doctype html>
<html>
   <head>
      <title>Moon</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="css/style.css">
   </head>
   <body>

      <div id="app">
            <Home></Home>
      </div>

      <script src="js/bundle.js"></script>
   </body>
</html>
sadeghbarati commented

sorry its my bad
i dont use ./ for import

import { Header, Main, Sidebar, Footer } from 'homeComponents/index'

im using Moon and Webpack Its very good repository
Thanks to @imlinus to create this boilerplate
https://github.com/imlinus/MoonJs-WebPack-ES6-SCSS-Boiler

Another qustion i have how to write currently in template: `` ?? because one Component will rendered
for example just Header will be shown :(

template: `<Header></Header><Main></Main><Footer></Footer>`

 or

`<Header></Header>
<Main></Main>
<Footer></Footer>`

or 

`<Header/><Main/><Footer/>`
sadeghbarati commented

any idea ?? 🚶 🤐

sadeghbarati commented

I fount my problem... to be able for include components into another component template u must create a wrapper or parent for them and then define ur module layout like Header Main Footer

solution 👇

export const Home = Moon.component('Home', {
  template: `<div class="home">
              <Header/>
              <Aside/>
            </div>`,
})

GL & HF 😄

kbrsh commented

All components in Moon need to have one root element, and are registered globally so you don't need to import them. You just need one Moon that registers all components and they will automatically be available.

  • ❤️1