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

Question

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

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

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

Я вызываю его из вида, подобного этому, обратите внимание на то, что bind:checked=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>