-1

I would like to compose components defined with ractivejs library. I know I can do this within one template by having them one next to the other. For instance :

template : "<Component1 /><Component2 />"

But what I want to do, is nesting components, that is something like 

template : "<Component1 />"

and in the definition of Component1:

template : "<Component2 />".

My question is : is that possible? With my current code, I get the following error:

Uncaught ParseError: Illegal tag name at line 1 character 224:
<div id='rdt-tt' class='rdt-tt-transover' style='display: {{display}}; top: {{top}}; left: {{left}}; width:{{width}}; height:{{height}}; text-align: {{text_align}}; position:fixed;  white-space:nowrap;'> <TT_Content /> </div>

Here is a simplified version of the code:

        Tooltip = Ractive.extend({
        template: "" +
            "<div id='rdt-tt' class='rdt-tt-transover' style='display: {{display}}; top: {{top}}; left: {{left}}; width:{{width}}; height:{{height}}; text-align: {{text_align}}; position:fixed;  white-space:nowrap;'> " +
            "<TT_Content /> "+
            "</div> ",
        append: true
    });

    TT_Content = Component.extend ({
   template :  "something here",
    append: true
});

tooltip = new Ractive({
    el: 'output',
    append: true,
    template: '<Tooltip />',
    components: {
        Tooltip : Tooltip,
        TT_Content : TT_Content
    }
});

This is my first question on stackoverflow, I will gladly ask for your forgiveness and advice if I disrespected some of the guidelines.

user3743222
  • 18,345
  • 5
  • 69
  • 75

1 Answers1

1

Underscores _ are not valid in component tag names. Use hypens - instead. It's a nod to the W3C custom element spec which actually requires custom elements to have a hypen.

Though not required, as a matter of style it's not a bad idea to use lower case to differentiate the tag instance from the "Class" definition created via the Ractive.extend({...}) call. You can also register components on other components if they're only used by that component.

var Tooltip = Ractive.extend({
    template: <div style='...'><tooltip-content/></div>"
});

var TooltipContent = Component.extend ({
    template :  "something here",
});

var tooltip = new Ractive({
    el: 'output',
    append: true,
    template: '<tooltip/>',
    components: {
        tooltip : Tooltip,
        'tooltip-content' : TooltipContent
    }
});

It's also not very meaningful to specify append: true on a component that's going to be used in-line (in the template) as it doesn't have any meaning and will be ignored.

martypdx
  • 3,702
  • 14
  • 22
  • Excellent! Thanks for the prompt answer and style recommendations. I am fairly new to Ractive (I switched from canjs because I was not happy with the documentation) and I am still struggling to find the best ways to use the components - which i see are themselve a new addition to the framework. But it does look promising so I'll continue to explore. Thanks again. – user3743222 Feb 23 '15 at 16:50