Skip to content

Instantly share code, notes, and snippets.

@paulocoghi

paulocoghi/App.html

Last active March 28, 2018 15:33
Download ZIP

Revisions

  1. paulocoghi revised this gist Mar 23, 2018. 3 changed files with 8 additions and 2 deletions.
    2 changes: 2 additions & 0 deletions App.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,4 +19,6 @@

    store: () => store
    };

    window.store = store;
    </script>
    4 changes: 3 additions & 1 deletion InputAdd.html
    View file
    Original file line number Diff line number Diff line change
    @@ -13,6 +13,8 @@

    methods: {
    push
    }
    },

    store: () => window.store
    };
    </script>
    4 changes: 3 additions & 1 deletion List.html
    View file
    Original file line number Diff line number Diff line change
    @@ -26,6 +26,8 @@
    export default {
    methods: {
    splice
    }
    },

    store: () => window.store
    };
    </script>
  2. paulocoghi revised this gist Mar 23, 2018. 2 changed files with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions App.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,9 @@
    <Add></Add>
    <InputAdd></InputAdd>

    <List></List>

    <script>
    import Add from './Add.html'
    import InputAdd from './InputAdd.html'
    import List from './List.html'

    import { Store } from 'svelte/store.js';
    @@ -13,7 +13,7 @@
    export default {

    components: {
    Add,
    InputAdd,
    List,
    },

    0 Add.html → InputAdd.html
    View file
    File renamed without changes.
  3. paulocoghi created this gist Mar 23, 2018.
    18 changes: 18 additions & 0 deletions Add.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    <input bind:value='newTodo' placeholder='buy milk'>
    <button on:click='push("$todos", newTodo)'>add todo</button>

    <script>
    import { push } from 'svelte-extras';

    export default {
    data: function () {
    return {
    newTodo: ''
    };
    },

    methods: {
    push
    }
    };
    </script>
    22 changes: 22 additions & 0 deletions App.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    <Add></Add>

    <List></List>

    <script>
    import Add from './Add.html'
    import List from './List.html'

    import { Store } from 'svelte/store.js';

    const store = new Store( { todos: [ 'Item 1', 'Item 2' ] }, );

    export default {

    components: {
    Add,
    List,
    },

    store: () => store
    };
    </script>
    31 changes: 31 additions & 0 deletions List.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    <ul>
    {{#each $todos as todo, i}}
    <li>
    <button on:click='splice("$todos", i, 1)'>x</button>
    {{todo}}
    </li>
    {{/each}}
    </ul>

    <style>
    ul {
    list-style: none;
    padding: 0;
    }
    li button {
    color: rgb(200,0,0);
    background: rgba(200,0,0,0.1);
    border-color: rgba(200,0,0,0.2);
    padding: 0.2em 0.5em;
    }
    </style>

    <script>
    import { splice } from 'svelte-extras';

    export default {
    methods: {
    splice
    }
    };
    </script>
    3 changes: 3 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    ## Multiple components and store variables ($)

    Just trying (and failing) to work with Svelte's store variables with multiple components.