-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·88 lines (77 loc) · 2.58 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:600' rel='stylesheet' type='text/css'>
<script src="vendor/console-polyfill.js"></script>
<script src="vendor/es5-shim.min.js"></script>
<script src="vendor/es5-sham.min.js"></script>
<script src="vendor/jquery.min.js"></script>
<script src="vendor/react-with-addons.js"></script>
<script src="vendor/JSXTransformer.js"></script>
<script src="store.js"></script>
</head>
<body>
<div id="container">
<h1>Your List App</h1>
<div id="app">
<div id='form-container'></div>
<div id='list-container'></div>
</div>
</div>
<script type="text/jsx">
var CreationForm = React.createClass({
render: function() {
return (
<form id="add-form" onSubmit={this.handleSubmit}>
<input id='create' ref="description" type='text' placeholder='Add Something to the list!' />
</form>
)
},
handleSubmit: function(event) {
event.preventDefault()
var description = this.refs.description.getDOMNode().value
this.refs.description.getDOMNode().value = ''
ListStore.addItem(description);
}
})
var Item = React.createClass({
render: function() {
var itemClass = this.props.completed ? 'item completed' : 'item'
return (
<li className={itemClass}>
<span className='complete-button' onClick={this.handleComplete}>{'\u2714'}</span>
<div className='description'>{this.props.description}</div>
<span className='delete-button'>{'\u2718'}</span>
</li>
)
},
handleComplete : function() {
ListStore.toggleCompleteness(this.props.id);
}
})
var List = React.createClass({
getInitialState: function() {
return (
{items: []}
)
},
componentWillMount: function() { //WHAT IS GOING ON HERE?
$(ListStore).on('storeHasChanged', function() {
this.setState({ items: ListStore.getItems() })
}.bind(this))
},
render: function() {
var itemComponents = this.state.items.map(function(itemData) {
return <Item key={'item-' + itemData.id} {...itemData}/>
})
return (
<ul id='list'>
{itemComponents}
</ul>
)
}
})
React.render(<CreationForm />, document.getElementById('form-container') )
React.render(<List />, document.getElementById('list-container') )
ListStore.loadItems();
</script>
</body>