Svelte：手风琴选择器的数据绑定答案

【问题标题】：Svelte : data-binding for an accordion pickerSvelte：手风琴选择器的数据绑定
【发布时间】：2019-01-14 15:37:45
【问题描述】：

我正在围绕 Svelte (JS) 制作一个医学调查用途的应用程序。我的数据是关于{类别、测试、子测试}

我需要使用手风琴子测试选择器来提供 ressumé 条目。

由于体积的原因，设计选择是合并类别和测试级别。用户选择一个类别 + 测试，手风琴显示可以选择的子测试..

我不太熟悉 Svelte 的双向数据绑定。我试过这个，但导致类型错误：'ctx.selected' is not efined.

<section>
  <h1>Pick subtests you need in accordion list</h1>

  <div class="accordion">
    {#each cats_tests as ct, ctidx }
      <div class="wrapper">
        <h2 class="ct-heading">
         <label>
           <input bind:group='selected' value={ ctidx }  type=checkbox />
           <span>{ ctidx }: { ct.name }</span>
         </label>
        </h2>
        {#if selected[ctidx] }
          {#each ct.subtests as sub, subidx }
            <div transition:fade>
              <h3 class="subtest-heading">
                <label for="ct-{ctidx}-sub-{subidx}">
                  <input  id="ct-{ctidx}-sub-{subidx}" type="checkbox" />
                  <span>{ subidx }: { sub.name }</span>
                </label>
              </h3>
            </div>
          {/each}
       {/if}
      </div>
    {/each}
  </div>
</section>

<script>
  import { fade } from 'svelte-transitions'

  export default {
    transitions: { fade},

    oncreate() {

    },

    data() {
      return {
        cats_tests: [
          {
            name: 'Cat A - Test 1',
            subtests: [
              { name: 'subtest-s'},
              { name: 'subtest-t'},
              { name: 'subtest-u'}
            ]
          }, {
            name: 'Cat A - Test 2',
              subtests: [
          { name: 'subtest-v'},
          { name: 'subtest-w'},
          { name: 'subtest-x'} ,
          { name: 'subtest-y'}
        ]
          }, {
            name: 'Cat B - Test 3',
            subtests: [
              { name: 'subtest-z'}
            ]
         }
       ]
     }
    }
  }
</script>

<style>
  h2.ct-heading {
    background-color: #d1e1f1;
  }

  h3.subtest-heading {
    padding-left: 15%;
  }

</style>

问题：

如何解决这个问题？
如何在不查询服务器的情况下检索应用程序其他部分中选取的子测试？考虑我正在使用 svelte-routing 插件和商店

感谢您的回答。

【问题讨论】：

标签： typescript components accordion svelte

【解决方案1】：

基本上：

一个错误（缺失）在数据部分添加selected: [] ，当然...

并检测选择了哪个标题：

{#if selected.indexOf(ctidx) > -1 }
  {#each ct.subtests as sub, subidx }
    <div transition:fade>
      // ...
    </div>
   {/each}
 {/if}

这对我有用！

【讨论】：