Skip to content

Instantly share code, notes, and snippets.

@JaySunSyn
Last active January 17, 2018 11:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JaySunSyn/e990ad63f2a497e9f0d5eacec080f2d7 to your computer and use it in GitHub Desktop.
Save JaySunSyn/e990ad63f2a497e9f0d5eacec080f2d7 to your computer and use it in GitHub Desktop.
Redux Polymer Todo Tutorial Step-1
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="redux/redux-mixin.html">
<dom-module id="todo-list">
<template>
<ul>
<template is="dom-repeat" items="[[todos]]" as="todo">
<li on-click="_remove">[[todo.text]] <span style="color: white">Remove</span></li>
</template>
</ul>
</template>
<script>
class TodoList extends ReduxMixin(Polymer.Element) {
static get is() {
return 'todo-list';
}
static get properties() {
return {
todos: {
type: Array,
statePath: 'todos',
},
};
}
static get actions() {
return {
remove: (todo) => {
return {
type: 'REMOVE_TODO',
todo: todo,
};
},
};
}
_remove(e) {
const todo = e.model.todo;
// 'remove' refers to the above created action
this.dispatch('remove', todo);
}
}
window.customElements.define(TodoList.is, TodoList);
</script>
</dom-module>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment