Kinesim/vendor/state/test/index.html

104 lines
3 KiB
HTML
Raw Permalink Normal View History

2024-10-03 06:42:49 +05:30
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cow tests</title>
<script src="/js/require.js" charset="utf-8"></script>
</head>
<body>
<div class="books">
<h1>Books</h1>
<div id="container">
</div>
</div>
<script>
requirejs.config({
baseUrl: '/vendor/state/',
});
let books, authors
require(['State'], function(storeManager) {
books = storeManager.createStore('books', [{
title: 'Don`t make me think',
author: 'id1',
uid: '321312',
}, {
title: 'Loriot`s Dramatische Werke',
author: 'id2',
uid: '1232133',
}])
authors = storeManager.createStore('authors', {
selected: 'id2',
list: {
id1: {
name: 'Steve Krug',
},
id2: {
name: 'Loriot',
},
},
})
authors.action('change_name', state => state.list, (state, data) => {
return Object.assign({}, state, {
[data.id]: {
name: data.name,
},
})
})
authors.action('change_selected', (state, data) => {
return Object.assign({}, state, {
selected: data.selected,
})
})
books.action('change_title', (state, data) => {
return state.map((el, i) => {
if (el.uid === data.uid) {
return Object.assign({}, el, {
title: data.title,
})
}
return el
})
})
const getAuthorList = () => authors.getState().list
books.listen([state => state, getAuthorList], (state, authors) => {
console.group('render')
for (book of state) {
console.log(`title:%c ${book.title}`, 'color: blue')
console.log(`author:%c ${authors[book.author].name}`, 'color: lightblue')
}
console.groupEnd()
let html = '<ul>'
for (book of state) {
html += `<li><b>${book.title}</b> - <small>${authors[book.author].name}</small></li>`
}
html += '</ul>'
document.getElementById("container").innerHTML = html
})
authors.dispatch('change_name', {
id: 'id1',
name: 'Steve',
})
books.dispatch('change_title', {
uid: '321312',
title: 'Make me think!',
})
authors.dispatch('change_selected', {
selected: 'id1',
})
})
</script>
</body>
</html>