-
-
Save Kennethtruyers/75aadba05ee34f0e9c0edc10da2d917a to your computer and use it in GitHub Desktop.
Aurelia Store observale gist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<button click.delegate="addTo1()"> Add to 1 </button> | |
<button click.delegate="addTo2()"> Add to 2 </button> | |
<br /> | |
List1: | |
<ul> | |
<li repeat.for="item of list1">${item}</li> | |
</ul> | |
List2: | |
<ul> | |
<li repeat.for="item of list2">${item}</li> | |
</ul> | |
Log: | |
<ul> | |
<li repeat.for="item of logs">${item}</li> | |
</ul> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { inject } from "aurelia-framework"; | |
import {connectTo, Store} from 'aurelia-store'; | |
function addList1(state, text) { | |
return Object.assign({}, state, { list1: [...state.list1, text] }); | |
} | |
function addList2(state, text) { | |
return Object.assign({}, state, { list2: [...state.list2, text] }); | |
} | |
@inject(Store) | |
@connectTo({ | |
selector: { | |
list1: store => store.state.pipe(window.rxjs.operators.pluck('list1')), | |
list2: store => store.state.pipe(window.rxjs.operators.pluck('list2')) | |
} | |
}) | |
export class App { | |
store; | |
list1 = []; | |
list2 = []; | |
logs = []; | |
constructor(store) { | |
this.store = store; | |
this.store.registerAction('addList1', addList1); | |
this.store.registerAction('addList2', addList2); | |
} | |
list1Changed(newValue, oldValue) { | |
this.logs.push('list 1 changed, newValue and oldValue are ' + (newValue === oldValue ? '' : ' not ') + 'equal' ); | |
} | |
list2Changed(newValue, oldValue) { | |
this.logs.push('list 2 changed, newValue and oldValue are ' + (newValue === oldValue ? '' : ' not ') + 'equal' ); | |
} | |
addTo1() { | |
this.store.dispatch('addList1', 'item from list 1'); | |
} | |
addTo2() { | |
this.store.dispatch('addList2', 'item from list 2'); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<title>Aurelia Store gist</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
</head> | |
<body aurelia-app="main"> | |
<h1>Loading....</h1> | |
<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script> | |
<script src="https://rawgit.com/zewa666/aurelia-kendoui-bundles/1.9.3/config2.js"></script> | |
<script> | |
System.import('aurelia-bootstrapper'); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/******************************************************************************* | |
* The following two lines enable async/await without using babel's | |
* "runtime" transformer. Uncomment the lines if you intend to use async/await. | |
* | |
* More info here: https://github.com/jdanyow/aurelia-plunker/issues/2 | |
*/ | |
//import regeneratorRuntime from 'babel-runtime/regenerator'; | |
//window.regeneratorRuntime = regeneratorRuntime; | |
/******************************************************************************/ | |
import { initialState } from "./state"; | |
export function configure(aurelia) { | |
aurelia.use | |
.standardConfiguration() | |
.developmentLogging() | |
.plugin("aurelia-store", { initialState }); | |
aurelia.start().then(a => a.setRoot()); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const initialState = { | |
list1: [], | |
list2: [] | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment