Svelte.js-如何代理绑定?

时间:2018-10-30 12:10:35

标签: svelte svelte-component

我正在尝试以自定义样式实现复选框组件,但是找不到代理绑定的方法。这是该组件现在的外观(不起作用):

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

我希望它可以与checkedgroup绑定一起用作常规复选框。但是现在没有组,我得到一个错误。有没有办法用斯维尔特做这些事情?

1 个答案:

答案 0 :(得分:0)

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

function pushbutton2_Callback(hObject, eventdata, handles)
assert(isappdata(hObject,'loaded_data'),'Load some data first!');
loaded_data=getappdata(hObject,'loaded_data');
%...%

我从这样的视图调用它,请注意 bind:checked = user.usrRoles.reports 是一个布尔值:

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