ractivejs recursive components keypath isolation

Question

I modified the ractivejs recursive components example.

I'm trying to add a button to show/hide the children of the parent node. My problem is my "show_files" toggle hides/shows everything as if each [+] button does the same thing. This makes sense in a way, but I remember doing this with single-file components and I thought I achieved the desired results.

How do I make this so I can show/hide children for a single arbitrary parent? I assume this is keypath magic I don't understand.

var data = {
    root: {
        href: 'http://some/root/href',
        files: [
            { type: 'jpg', filename: 'hello.jpg' },
            { type: 'mp3', filename: 'NeverGonna.mp3' },
            { type: 'folder', filename: 'subfolder', files: [
                { type: 'txt', filename: 'README.txt' },
                { type: 'folder', filename: 'rabbithole', files: [
                    { type: 'txt', filename: 'Inception.txt' }
                ]}
            ]}
        ]
    },
    show_files: true
};

Ractive.components.folder = Ractive.extend({
    template: '#folder'
});

Ractive.components.file = Ractive.extend({
    template: '#file'
});

// YOUR CODE GOES HERE
ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: data
});

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/0.7.3/ractive.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main></main>

<script id='template' type='text/ractive'>
    <div class='fileSystem'>
        <folder href='{{root.href}}' files='{{root.files}}'/>
    </div>
</script>

<script id='folder' type='text/ractive'>        
    <ul class='folder'>        
        <button on-click='toggle("show_files")'>+</button>
        {{#show_files}}
            {{#files}}
            <file href='{{href}}/{{filename}}'/>
            {{/files}}
        {{/show_files}}
    </ul>
</script>

<script id='file' type='text/ractive'>
    <li class='file'>
        <img class='icon-{{type}}'/>
        <span><a href="{{href}}">{{filename}}</a></span>
        
        <!-- if this is actually a folder, embed the folder partial -->
        {{# type === 'folder' }}
        <folder href='{{href}}' files='{{files}}'/>
        {{/ type === 'folder' }}
    </li>
</script>

Answer 1

You need to put the show_files on each folder:

Ractive.components.folder = Ractive.extend({
    data: { show_files: true },
    template: '#folder'
});

Edited snippet:

var data = {
    root: {
        href: 'http://some/root/href',
        files: [
            { type: 'jpg', filename: 'hello.jpg' },
            { type: 'mp3', filename: 'NeverGonna.mp3' },
            { type: 'folder', filename: 'subfolder', files: [
                { type: 'txt', filename: 'README.txt' },
                { type: 'folder', filename: 'rabbithole', files: [
                    { type: 'txt', filename: 'Inception.txt' }
                ]}
            ]}
        ]
    }
};

Ractive.components.folder = Ractive.extend({
    data: { show_files: true },
    template: '#folder'
});

Ractive.components.file = Ractive.extend({
    template: '#file'
});

// YOUR CODE GOES HERE
ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: data
});

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/0.7.3/ractive.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main></main>

<script id='template' type='text/ractive'>
    <div class='fileSystem'>
        <folder href='{{root.href}}' files='{{root.files}}'/>
    </div>
</script>

<script id='folder' type='text/ractive'>        
    <ul class='folder'>
        <button on-click='toggle("show_files")'>+</button>
        {{#show_files}}
            {{#files}}
            <file href='{{href}}/{{filename}}'/>
            {{/files}}
        {{/show_files}}
    </ul>
</script>

<script id='file' type='text/ractive'>
    <li class='file'>
        <img class='icon-{{type}}'/>
        <span><a href="{{href}}">{{filename}}</a></span>
        
        <!-- if this is actually a folder, embed the folder partial -->
        {{# type === 'folder' }}
        <folder href='{{href}}' files='{{files}}'/>
        {{/ type === 'folder' }}
    </li>
</script>