Как я могу вызвать функцию с помощью onClick с помощью встроенных кнопок с помощью Svelte? - PullRequest
Новая
       23

Как я могу вызвать функцию с помощью onClick с помощью встроенных кнопок с помощью Svelte?

0 голосов
/ 09 июля 2019

Кнопки загружаются в правильный столбец, и я пытаюсь добавить к ним функциональность.Просто добавление onClick к первой кнопке для вызова моей функции saveMe () и я получаю ошибку saveMe не определена.Может кто-то видит, что я делаю неправильно?

Я пробовал несколько вещей, чтобы заставить это работать.hrefs, getElementById и даже простое оповещение в кнопке, но ничего не работает, или я получаю ошибки. 

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<script>
import { beforeUpdate, createEventDispatcher, onMount, shared } from 'svelte';
import Fuse from 'fuse.js';
import { writable } from 'svelte/store';
import { produce } from 'immer';
//import {saveMe} from './newlocal.js';
//console.log('saveme', saveMe);
//alert({saveMe})
//const testmsg = newlocal.saveMe(test);
let buttons = '<div class="btn-group style="width:100%"><button style="width:33.3%" type="button" onClick="saveMe()"><i class="fa fa-floppy-o"></i></button style="width:33.3%"><button style="width:33.3%"><i class="fa fa-rebel"></i></button><button style="width:33.3%"><i class="fa fa-print"></i></button></div>';

export let faketable = [{Color:'BLUE', Car:'Camaro', Brand:'Chevy', Action:buttons, ID: 1},
{Color:'RED', Car:'Pinto', Brand:'Ford', Action:buttons, ID: 2},
{Color:'Gray', Car:'Gremlin', Brand:'Chevy', Action:buttons, ID: 3},
{Color:'White', Car:'Maverick', Brand:'Ford', Action:buttons, ID: 4},
{Color:'Yellow', Car:'Beetle', Brand:'Volkswagen', Action:buttons, ID: 5},
{Color:'Black', Car:'Batmobile', Brand:'Wayne Enterprises', Action:buttons, ID: 6},
{Color:'Pewter', Car:'Silverado', Brand:'Chevy', Action:buttons, ID: 7},
{Color:'Yucky', Car:'F-150', Brand:'Ford', Action:buttons, ID: 8},
{Color:'Navy Blue', Car:'911', Brand:'Porsche', Action:buttons,ID: 9},
{Color:'Cherry Red', Car:'Diablo', Brand:'Lamborghini', Action:buttons, ID: 10},
{Color:'Black', Car:'Sporster', Brand:'Harley Davidson', Action:buttons, ID: 11},
{Color:'Orange', Car:'Viper', Brand:'Dodge', Action:buttons, ID: 12}                
];

export let len = faketable.length;
console.log("len", len)

export let columns = ["Color", "Car", "Brand", "Action"];

export let apagetable = [];

export let clickable = true

export let currentPerPage = 10;
export let perPageOptions = [10, 20, 30, 40, 50];
export let currentPage = 1;
export let defaultpage = 1;

export let exactSearch = false; 

export let newpages = parseInt(len / currentPerPage);
console.log('newpages', newpages)

export let sortType = 'asc';

let tr;

export let x;
export let z;

const dispatch = createEventDispatcher();

export function click(row) {
    console.log('click', row);
        if (!clickable) {
            return;
        }
        if (getSelection().toString()) {
            // Return if some text is selected instead of firing the row-click event.
            return;
        }
        dispatch('row-click', row);
}

document.getElementById("saveme");
console.log('document', document);
function saveMe(){
    console.log('saveme');
    alert('I have been saved!');
}

export function sort(index) {
        if (index > -1) {
            setSortIcon(index);
            getPaged({colName: columns[index].field, direction: sortType});             
        }
}   

onMount(() => {
    calcPage(defaultpage);
});

$: selectedPage = selected + 1;

export function calcPage(defaultpage){
    x = parseInt(len / currentPerPage); 
    z = len % currentPerPage;
    apagetable = [];
    var temptable = [];
    var i = 0;  
    if (len > currentPerPage){
        if (z != 0){
            x += 1;
    }
    }

    for (i = 0 + (currentPerPage * (defaultpage - 1)); i < currentPerPage * defaultpage; ){
        if (!faketable[i]){
            break;
        }
        temptable.push(faketable[i]);   
        i++;
    }
    apagetable = temptable;
    return apagetable;
}

function getNext(){
    defaultpage += 1;
    if (defaultpage >= x){
        defaultpage = x;
    }
    calcPage(defaultpage);
}

function getPrev(){
    defaultpage -= 1;
    if (defaultpage <= 0){
        defaultpage = 1;
    }
    calcPage(defaultpage);
}

function getPageAmount(){   
    currentPerPage = perPageOptions;
    calcPage(defaultpage); 
    perPageOptions = [10, 20, 30, 40, 50]; 
}

</script>

<div>
        <table ref="table" class="table" style="width:100%" cellspacing="0" cellpadding="0">
            <thead>
                <tr>                    
                    {#each columns as column, x}    
                    <th style="width: { column.width ? column.width : 'auto' }" align="center"> 
                    {column}
                    </th>                       
                    {/each}                 
                </tr>
            </thead>
            <tbody>
                {#each apagetable as row}       
                <tr class="{ clickable ? 'clickable' : '' }" on:click="{() => click(row)}">
                    {#each columns as column, x}
                    <td align="center">                 
                        {@html row[column]}
                    </td> 
                    {/each}                 
                </tr>
                {/each}
            </tbody>
        </table>
    <button style="right;"><i class="material-icons" on:click="{getPrev}">chevron_left</i></button><button style="float: right;"><i class="material-icons" on:click="{getNext}">chevron_right</i></button> 
    <div class="table-footer">
        <div class="datatable-length">
            <label>
                <span>Rows per page:</span>
                <select bind:value="{perPageOptions}" on:change="{getPageAmount}">      
                    {#each perPageOptions as option} 
                        <option value={option}>  
                        {option}
                        </option>
                    {/each}
                </select>               
            </label>
        </div>
        <div class="datatable-info">
            {(currentPage - 1) * currentPerPage ? (currentPage - 1) * currentPerPage : 1}
                - {currentPerPage} of {len} 
        </div>
    </div>

</div>

<style> 

    tr.clickable {
        cursor: pointer;
    }   

    table {
        table-layout: fixed;
    } 

  table tr td {
        padding: 0 0 0;
        height: 50px;
        font-size: 13px;
        color: rgba(0, 0, 0, 0.87);
        border-bottom: solid 1px #DDDDDD;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;        
        border: 1px solid #dddddd;
        text-align: center;     
    }   

    table th {
    border-radius: 0;
        text-align: center;
    }
    table tbody tr:hover {
        background-color: #EEE;
    }
</style>

Я просто пытаюсь получить базовую функциональность, чтобы я мог добавить более конкретные детали ккнопки, как я иду.Но для этого примера, когда нажата кнопка «Сохранить», мне нужно предупреждение «Я был сохранен!».

1 Ответ

0 голосов
/ 15 июля 2019

В Svelte есть два подхода к обработке кликов:

  1. Встроенный: 
    <script>
      let selectedTabIndex = 0;
    </script>

    <li class:is-active={selectedTabIndex === 0}>
      <a href="#" on:click={() => (selectedTabIndex = 0)}>Tab 1</a>
С функцией: 
<script>

  export let hidden = false;
  function toggleSectionVisiblity(event) {
    hidden = !hidden;
  }
</script>

<a href="#" on:click={toggleSectionVisiblity}>Show / hide</a>
...