Svelte: привязка данных для сборщика аккордеона - PullRequest
Новая
       23

Svelte: привязка данных для сборщика аккордеона

0 голосов
/ 14 января 2019

Я играю на Svelte (JS), чтобы создать приложение для медицинского обследования. Мои данные о {категориях, тестах, подтестах}

Мне нужно использовать сборщик аккордеонных подтестов для подачи резюме записей.

Выбор дизайна заключается в объединении категорий и уровней испытаний в зависимости от объема. Пользователь выбирает категорию + тест, а аккордеон показывает подтесты, которые можно выбрать ..

Я не очень знаком с двусторонним связыванием данных с Svelte. Я пробовал это, но приводит к ошибке типа: «ctx.selected» не определено. 

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

Вопросы:

  1. Как это исправить?
  2. Как получить выбранные подтесты в других частях приложения, не запрашивая сервер? Представьте, что я использую плагин svelte-routing и магазин

Спасибо за ответы.

1 Ответ

0 голосов
/ 14 января 2019

В основном:

одна ошибка (отсутствует) добавить selected: [] в разделе данных, конечно ...

и обнаружение выбранного заголовка: 

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

И это сработало для меня!

...