Svelte：通過Store函式獲取用戶輸入回呼

我在這里嘗試做的事情可能是不可能的，但作為 Svelte 的新手，我希望是的。??

我在一個組件中有一個洗掉按鈕，它打開一個全域可用的模式，用作確認對話框。模態組件在我的__layout.svelte，所以我可以從我的應用程式的任何地方呼叫它。

//=== Modal.svelte ===
<script lang="ts">
import { modal, confirmTrash } from '$lib/stores/modal'
//Do a bunch of stuff to customize the modal...
</script>

{#if modal.show}
  <h2>{$modal.title}</h2>
  <p>{$modal.message}</p>

  <button on:click={() => { send confirmation that the delete was confirmed }>{$modal.button}</button>
{/if}

這是我的modal商店：

//=== modal.ts ===
import { writable } from 'svelte/store'

//Customize the modal's state
export const modal = writable({
  title: '',
  message: '',
  button: '',
  mode: '',
  show: false
})

//Convenience function for showing the trash confirmation modal
export function confirmTrash(modalTitle: string, modalMessage: string, buttonText: string){
  modal.set({
    title: modalTitle,
    message: modalMessage,
    button: buttonText,
    mode: 'trash',
    show: true
  })
}

最后，這是我的應用程式中的組件，我通過單擊顯示洗掉確認模式的鏈接實際啟動洗掉程序：

//=== Component.svelte ===
<script lang="ts">
import { confirmTrash } from '$lib/stores/modal'
</script>

<a href="#trash" 
on:click={() => {
  confirmTrash('Trash Title', 'Message goes here.', 'Delete', function(result){
    //I want to be able to know ** here ** if the user clicked "Delete"
    console.log(result) //???
  })
}} 
>Trash</a>

我不清楚如何通過我的confirmTrash函式連接回呼函式，以將模態中的用戶回應傳遞回呼叫模態的位置。這可能嗎？

uj5u.com熱心網友回復：

為此，您只需傳入函式并相應地呼叫它。

//Customize the modal's state
export const modal = writable({
  title: '',
  message: '',
  button: '',
  mode: '',
  show: false,
  callback: (result: boolean) => { },
})

//Convenience function for showing the trash confirmation modal
export function confirmTrash(
  modalTitle: string,
  modalMessage: string,
  buttonText: string,
  callback: (result: boolean) => void,
){
  modal.set({
    title: modalTitle,
    message: modalMessage,
    button: buttonText,
    mode: 'trash',
    show: true,
    callback,
  })
}

然后在組件中呼叫它：

<script>
    // ...
    function onButton(result) {
        $modal.show = false;
        $modal.callback(result);
    }
</script>
<!-- ... -->
<button type=button on:click={() => onButton(false)}>Cancel</button>
<button type=button on:click={() => onButton(true)}>{$modal.button}</button>

REPL 示例

我不會像這樣使用單例組件，而是使用客戶端組件 API 創建新實體。它更少冗余，導致更清潔的生命周期和更少不必要的全域狀態。

例子：

<!-- Modal.svelte -->
<script>
    import { createEventDispatcher } from 'svelte';

    export let title;
    export let message;
    export let button = 'OK';
    
    const dispatch = createEventDispatcher();
</script>   

<div>
    <strong>{title}</strong>
    <p>{message}</p>

    <button type=button on:click={() => dispatch('result', false)}>Cancel</button>
    <button type=button on:click={() => dispatch('result', true)}>{button}</button>
</div>

// modal.js
import Modal from './Modal.svelte';

export function confirm(options) {
    return new Promise(resolve => {
        const modal = new Modal({
            target: document.body,
            props: options,
        });
        modal.$on('result', e => {
            resolve(e.detail);
            modal.$destroy();
        });
    })
}

用法：

<script>
    import { confirm } from './modal.js';
    
    async function onShow() {
        const confirmed = await confirm({
            title: 'Confirmation',
            message: 'You sure?',
        });
        if (confirmed == false)
            return;
        
        alert('Confirmed!');
    }
</script>

<button type=button on:click={onShow}>Show</button>

REPL 示例

標籤：javascript 打字稿 打回来 苗条 苗条的商店

上一篇：Javascript僅通過雙擊問題定位第一個元素

下一篇：函式中未定義的jQueryDataTable引數