Skip to main content

onchange

onchange​

interface OnChange {
    // kind of change
    action: "add" | "update" | "delete";
    // id of changed comment
    id?: number;
    // changed comment
    comment?: Comment;
    // current comments data
    data: Comment[];
    // original comments data
    originalValue: Comment[] | number | string;
}

onChange(ev: OnChange): void

event occurs when comments data has been changed. It can be used to synchronize with a backend or local storage.

Usage​

Handling data changes​

<script>
  import { Comments } from 'wx-svelte-comments';
  import { value } from './data.js';

  const onchange = ({ id, action, comment, originalValue }) => {
    console.log(id, action, comment, originalValue);
  };
</script>

<Comments {value} {onchange} />

For add operations, onChange does not provide id. For delete operations, onChange does not provide comment. originalValue represents the state of the widget's value property at the time of data loading.

Loading and saving comments through REST helper​

<script>
  import { RestURL } from "wx-lib-data-provider";
  import { Comments } from 'wx-svelte-comments';

  const url = new RestURL("https://some.com/api/comments");  
</script>

<Comments
  ondata={v => url.get(v)}
  onchange={({ action, comment, id, originalValue: v }) => 
    url.path(v).save(action, comment, id)}
/>

This example demonstrates how to load comments from a REST API and save changes back to the server.

Saving changes in comments through local storage​

<script>
  import { RestURL } from "wx-lib-data-provider";
  import { Comments } from 'wx-svelte-comments';

  const url = new RestURL("https://some.com/api/comments");  
</script>

<Comments
  value={1}
  ondata={v => localStorage.getItem(`comments-${v}`)}
  onchange={({ value }) => 
    localStorage.setItem(`comments-${value}`, JSON.stringify(value))}
/>

This example saves the comments to local storage whenever there is a change in the comments data.