Изоляция пути к рекурсивным компонентам ractivejs

Я изменил пример рекурсивных компонентов ractivejs.

Я пытаюсь добавить кнопку, чтобы показать/скрыть дочерние элементы родительского узла. Моя проблема в том, что мой переключатель «show_files» скрывает/показывает все, как будто каждая кнопка [+] делает одно и то же. В некотором смысле это имеет смысл, но я помню, как делал это с однофайловыми компонентами, и мне казалось, что я достиг желаемых результатов.

Как мне сделать так, чтобы я мог показывать/скрывать дочерние элементы для одного произвольного родителя? Я предполагаю, что это магия ключей, которую я не понимаю.

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>


ractivejs
person Rz Mk    schedule 24.08.2015    source источник
comment
Возможно, я должен вручную передать ключевой путь компонентам с помощью keypath='{{keypath}}.{{@keypath}}'. Затем установить/переключить/что угодно на {{keypath}}.{{@keypath}}.show_children?   -  person Rz Mk    schedule 25.08.2015

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно поместить show_files в каждую папку:

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

Отредактированный фрагмент:

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>

person martypdx    schedule 25.08.2015