Svelte.js - как проксировать привязки?

Я пытаюсь реализовать компонент флажка с настраиваемыми стилями, но не могу найти способ привязки прокси. Вот как теперь выглядит компонент (не работает):

<input                                                                                                                      
    id = "{id}"                                                                                                               
    bind:group                                                                                                              
    bind:checked                                                                                                            
    type = "checkbox">                                                                                                        
<label for = "{id}">                                                                                                          
    <slot></slot>                                                                                                           
</label>                                                                                                                    

<script>                                                                                                                    
    const rndID = (size) => [...Array(size)].map(i => (~~(Math.random()*36)).toString(36)).join('')                         
    export default {                                                                                                        
        data: () => ({                                                                                                      
            id: rndID(15),                                                                                                  
        }),                                                                                                                 
    }                                                                                                                       
</script>                                                                                                                   

<style>
...
</style>

Я хочу, чтобы его можно было использовать как обычно с привязками checked или group. Но теперь без группы выдает ошибку. Есть ли способ делать такие вещи со Svelte?

🤔 А знаете ли вы, что...
Svelte предоставляет множество готовых компонентов и библиотек для ускорения разработки.


532
1

Ответ:

Вот мой подход. Я создаю многоразовый компонент флажка и вызываю его из любых форм, которые в нем нуждаются. Обратите внимание на привязка: проверено = проверено

<div class = "pure-control-group">
     <label class = "form-check-label" for = {id}>{@html label}</label> 
    <input type = "checkbox" class = "form-check-input" id = {id} 
      name = {name} bind:value=value bind:checked=checked>
    <slot name = "afterlabel"></slot>
</div> 
<script>
    export default {
    oncreate() { },
    methods: { }
    };
</script> 

Я вызываю это из такого представления, обратите внимание, что привязка: проверено = user.usrRoles.reports - это логическое значение:

<fieldset>  
    <Checkbox name = "roles" value = "reports" id = "role-valid" label = "Reports Page" bind:checked=user.usrRoles.reports>
        <div class = "pure-form-message-inline " slot = "afterlabel">View Reports Page</div></Checkbox> 
</fieldset> 
<script>
    export default {
    components: {
        Checkbox: './forms/form-field-checkbox.html'
    }, 

    };
</script>