ractivejs 递归组件键路径隔离

Question

我修改了 ractivejs 递归组件示例。

我正在尝试将按钮添加到 parent 节点的 show/hide 和 children。我的问题是我的 "show_files" 切换 hides/shows 一切，就好像每个 [+] 按钮做同样的事情一样。这在某种程度上是有道理的，但我记得使用 single-file 个组件进行过此操作，我认为我达到了预期的结果。

我该怎么做才能 show/hide children 任意一个 parent？我认为这是我不明白的 keypath 魔法。

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

您需要在每个文件夹上放置 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>

ractivejs 递归组件键路径隔离

ractivejs recursive components keypath isolation

ractivejs