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

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

0 голосов
/ 30 октября 2018

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

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

1 Ответ

0 голосов
/ 30 октября 2018

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

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