104 lines
3 KiB
HTML
104 lines
3 KiB
HTML
|
<!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>
|