Обновление данных из onstate () в Svelte - PullRequest
Новая
       9

Обновление данных из onstate () в Svelte

0 голосов
/ 17 апреля 2019

Я только начал работать с Svelte / Sapper, и есть одна глупость, которую я не понимаю. Может быть, это потому, что я привык к Вю и не понимаю парадигму Свелте.

Я делаю слайдер или карусель. Для этого мне нужно знать, какой текущий раздел будет отображаться (что поможет определить анимацию входа), и вести запись предыдущего раздела (до тех пор, пока он должен выйти).

Полагаю, у меня может быть 

<button on:click="set({ section: 'products'})">Go to Products</button>

для переключения разделов, и это прекрасно работает. Но тогда я хочу иметь обнаружение в onstate (), чтобы при изменении раздела также обновлялся prop prevSection.

Вот (соответствующий) код, который у меня есть: 

<h1>Current section : {section}</h1>
<button on:click="set({ section: 'products'})">Go to Products</button>
<button on:click="set({ section: 'hr'})">Go to HR</button>
<button on:click="set({ section: 'verticals'})">Go to Verticals</button>
<div id="container">
    <Slideshow bind:section></Slideshow>
    <Slideshow bind:prevSection></Slideshow>
</div>

<style>/* Not important */</style>

<script>
    export default {
        onstate({ changed, current, previous }) {
            if (changed.section && previous) {
                this.set({prevSection: previous.section});
            }
        },

        oncreate() {},
        onupdate() {},
        ondestroy() {},

        components: {
            Slideshow: '../components/Slideshow.html'
        },

        data() {
            return {
                section : 'products',
                prevSection : ''
            };
        }
    }
</script>

Мне бы хотелось иметь начальное состояние, в котором section = products и prevSection пустые, а затем каждый раз, когда я нажимаю кнопку, prevSection принимает значения раздела, а затем раздел обновляется до нового значения, определяемого кнопкой.

Большое спасибо за вашу помощь!

Ответы [ 2 ]

0 голосов
/ 30 апреля 2019

Получается, что проблема не в самом коде, а в том, что 

<Slideshow bind:prevSection></Slideshow>

, очевидно, получает опору prevSection , но я пытался console.log () атрибут section .Так что код работал, я просто проверял неправильный реквизит.

Спасибо всем, кто нашел время, чтобы ответить или даже просто посмотреть на него!

0 голосов
/ 20 апреля 2019

Не уверен, что это то, что вы ищете, но я смог заставить переменные section и prevSection корректно обновляться в вашем примере, переместив логику с onstate на onupdate

...