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

这是我的方法。我创建了一个可重用的复选框组件，并从任何需要它的表单中调用它。注意 bind:checked=checked

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