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

sadeghbarati commented 6 years ago

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 6 years ago

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 6 years ago

any idea ?? 🚶 🤐

sadeghbarati commented 6 years ago

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 6 years ago

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.

kbrsh / moon

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