Question

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

我正在尝试添加一个按钮来显示/隐藏父节点的子节点。我的问题是我的“show_files”切换隐藏/显示所有内容，就像每个[+]按钮执行相同的操作一样。这在某种程度上是有道理的，但我记得用单文件组件做这件事，我认为我已经达到了预期的效果。

我该如何制作这样我可以为一个任意父母显示/隐藏孩子？我认为这是我不理解的关键路径魔法。

UIScrollView

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;
}

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递归组件keypath隔离

1 个答案: