Switch component at runtime <{{instance}}/>

[HackerTree]

Hi all,

I'm looking for a good way to switch component at runtime, setting the data, for example <{{instance}}/> instead of:

{{#if isCodeMirror}}
 <CodeMirror/>
{{elseif isInstance}}
 <{{instance}}/>
{{else}}
 <Welcome/>
{{/if}}

https://github.com/rognoni/HackerTree/blob/master/Front-end/Ractive/templates/editor/page.html

Thanks

[HackerTree]

For the moment I'm using this way, but I do not know if the best.

In the root component (Page) I have this data and show function:

editor: {
  code: null,
  mode: null,
  keypath: null
},
show: {
  CodeMirror: false,
  Root: false,
  SimpleMDE: true
}

[...]

show: function(name) {
  for (var show in this.get('show')) {
    this.set('show.'+show, false);
  }
  this.set('show.'+name, true);
}

and this template:

{{#if show.CodeMirror}}
  <CodeMirror id='codemirror' code={{editor.code}} mode={{editor.mode}} keypath={{editor.keypath}}/>
{{elseif show.Root}}
  {{Root}}
{{elseif show.SimpleMDE}}
  <SimpleMDE id='simplemde' code={{readme.code}}/>
{{/if}}

When I click for example a link into the sub-component (Sidebar), I have to prepare the CodeMirror attributes and show it:

this.root.set('editor.mode', mode);
this.root.set('editor.code', code);
this.root.set('editor.keypath', keypath);

this.root.show('CodeMirror');

Really I do not know, another better way?

Thanks

[Paulo Coghi]

If you want, I would be glad to see you trying my (beta) routing library based on Ractive, Altiva.

You can define multiple dynamic areas and change them based on route.

Create an index.html file, add the altiva.min.js and, inside another script tag, add:

var app = new Altiva ()

app.sessions( [ 'content' ] )

app.route( '/',
{
    content: 'Root'
});

app.route( '/mirror',
{
    content: 'CodeMirror'
});

app.route( '/simple',
{
    content: 'SimpleMDE'
});

app.start();

Finally, create a "components" folder in the root folder of your project and, for each component you want to use, create a html file. In this case, Root.html, CodeMirror.html and SimpleMDE.html

Each of them follow the official Ractive component definition:

<!-- HTML part -->
<p class="test-class">Just an {{example}} text</p>

<!-- CSS part (optional) -->
<style>
    .test-class {
        color: #aa0000;
    }
</style>

<!-- Javascirpt part (optional) -->
<script>
    component.exports = {
        data: {
            example: 'awesome'
        }
    }
</script>

I would like to know if this is interesting to you.