3

I'm using the riot for the system. but I have a problem using the common tag in every place. because I have to copy the all common tag each page.

I added all tags like this. Does anyone have the solution for this ?

<st-service>
    <st-alert></st-alert>
    <st-header></st-header>
    <st-body></st-body>
    <st-footer></st-footer>
</st-service>

<st-profile>
    <st-alert></st-alert>
    <st-header></st-header>
    <st-body></st-body>
    <st-footer></st-footer>
</st-profile>
Sharanga Wedaka
  • 51
  • 7

2 Answers2

2

I found a solution, I'm using this method to handle these common tags. like this

<st-common>
    <st-alert></st-alert>
    <st-header></st-header>

    <yeild></yeild>

    <st-footer></st-footer>        
</st-common>

service-page.tag // page
<st-service-page>
    <st-common>
        <st-service></st-service>
    </st-common>
<st-service-page>

profile-page.tag // page
<st-profile-page>
    <st-common>
        <st-profile></st-profile>
    </st-common>
<st-profile-page>

service-view.tag
<st-service>
    // html / code body related to module
</st-service>

profile-view.tag
<st-profile>
    // html / code body related to module
</st-profile>

If needed in details about this I can explain.

Sharanga Wedaka
  • 51
  • 7
1

I'd have to know more about how you're routing to say for sure, but I think you should avoid using a different outer tag for each page. If your HTML looks something like this:

<body>
    <st-app />
    <script>
        const pages = {
            "/": "st-home",
            "/about/": "st-about",
        }
        const content_tag = pages[window.location.pathname] || "st-notfound"
        riot.mount("st-app", {
            content_tag: content_tag
        })
    </script>
</body>

Then <st-app> would be defined something like:

<st-app>
    <st-alert></st-alert>
    <st-header></st-header>

    <div data-is={this.opts.content_page}></div>

    <st-footer></st-footer>        
</st-app>

The important thing here being that you're controlling which tag should be used via the data-is attribute and the mounting options for <st-app>. In this example <st-home>, <st-about>, and <st-notfound> are riot components defined elsewhere.

chriscauley
  • 19,015
  • 9
  • 33
  • 33
  • Thanks for your suggestion. currently, I'm using the back-end routing to bind a tag. www.domain.com/profile - profile-page.tag www.domain.com/service - service-page.tag The back-end has each page layouts and each page has a separate tag. like above. – Sharanga Wedaka Jul 31 '19 at 04:56