forked from handsontable/handsontable
-
Notifications
You must be signed in to change notification settings - Fork 0
/
backbone.html
228 lines (189 loc) · 8.22 KB
/
backbone.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Backbone.js - Handsontable</title>
<!--
Loading Handsontable (full distribution that includes all dependencies)
-->
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/handsontable.css">
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/pikaday/pikaday.css">
<script data-jsfiddle="common" src="../dist/pikaday/pikaday.js"></script>
<script data-jsfiddle="common" src="../dist/moment/moment.js"></script>
<script data-jsfiddle="common" src="../dist/zeroclipboard/ZeroClipboard.js"></script>
<script data-jsfiddle="common" src="../dist/numbro/numbro.js"></script>
<script data-jsfiddle="common" src="../dist/numbro/languages.js"></script>
<script data-jsfiddle="common" src="../dist/handsontable.js"></script>
<!--
Loading demo dependencies. They are used here only to enhance the examples on this page
-->
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="css/samples.css?20140331">
<script src="js/samples.js"></script>
<script data-jsfiddle="common" src="js/backbone/lodash.underscore.js"></script>
<script data-jsfiddle="common" src="js/backbone/backbone.js"></script>
<script data-jsfiddle="common" src="js/backbone/backbone-relational/backbone-relational.js"></script>
<script src="js/highlight/highlight.pack.js"></script>
<link rel="stylesheet" media="screen" href="js/highlight/styles/github.css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
<!--
Facebook open graph. Don't copy this to your project :)
-->
<meta property="og:title" content="Integrate with Backbone.js">
<meta property="og:description"
content="Bind your Backbone collections to Handsontable">
<meta property="og:url" content="http://handsontable.com/demo/backbone.html">
<meta property="og:image" content="http://handsontable.com/demo/image/og-image.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="409">
<meta property="og:image:height" content="164">
<link rel="canonical" href="http://handsontable.com/demo/backbone.html">
<!--
Google Analytics for GitHub Page. Don't copy this to your project :)
-->
<script src="js/ga.js"></script>
</head>
<body>
<div class="wrapper">
<div class="wrapper-row">
<div id="global-menu-clone">
<h1><a href="../index.html">Handsontable</a></h1>
</div>
<div id="container">
<div class="columnLayout">
<div class="rowLayout">
<div class="descLayout">
<div class="pad" data-jsfiddle="example1">
<h2>Backbone.js</h2>
<p>
<a href="http://backbonejs.org/">Backbone.js</a> is a client-side
MV* framework that can do some pretty smart things
with data going to and coming back from a server, and has a great
event model for keeping multiple views in sync.
</p>
<p>
This little example shows how Backbone Models and Collections can
work with Handsontable. Below, you'll see events firing from
changes in the <code>CarCollection</code> by Handsontable or
otherwise.
</p>
<div id="example1"></div>
<p>
<button name="dump" data-instance="hot" data-dump="#example1" title="Prints current data source to Firebug/Chrome Dev Tools">
Dump data to console
</button>
<button id="add_car">Simulate a new Car</button>
<br>
<select multiple="multiple" id="example1_events" style="width: 100%; height: 100px"></select>
</p>
<p>
<strong>Please note</strong> that Backbone integration is a work in progress since Handsontable 0.8.14.
The code presented here has 2 known issues:
</p>
<ul>
<li>inserting and removing rows or columns triggers errors, both when using <code>alter</code> method and
the context menu
</li>
<li><code>minSpareRows</code> does not have effect directly after row was added from Backbone (as a
workaround, you would need to call <code>loadData</code> instead of <code>render</code>)
</li>
</ul>
<p>
Both issues will be addressed in future versions of HT. Contributions are welcome!
</p>
</div>
</div>
<div class="codeLayout">
<div class="pad">
<div class="jsFiddle">
<button class="jsFiddleLink" data-runfiddle="example1">Edit in jsFiddle</button>
</div>
<script data-jsfiddle="example1">
var
container = document.getElementById('example1'),
addCar = document.getElementById('add_car'),
eventHolder = document.getElementById('example1_events'),
CarModel = Backbone.Model.extend({}),
CarCollection,
cars,
hot;
CarCollection = Backbone.Collection.extend({
model: CarModel,
// Backbone.Collection doesn't support `splice`, yet! Easy to add.
splice: hackedSplice
});
cars = new CarCollection();
// since we're not using a server... make up some data. This will make
// a couple CarModels from these plain old objects
cars.add([
{make: 'Dodge', model: 'Ram', year: 2012, weight: 6811},
{make: 'Toyota', model: 'Camry', year: 2012, weight: 3190},
{make: 'Smart', model: 'Fortwo', year: 2012, weight: 1808}
]);
hot = new Handsontable(container, {
data: cars,
dataSchema: makeCar,
contextMenu: true,
columns: [
attr('make'),
attr('model'),
attr('year')
],
colHeaders: ['Make', 'Model', 'Year']
// minSpareRows: 1 //see notes on the left for `minSpareRows`
});
// this will log all the Backbone events getting fired!
cars.on('all', logEvents)
.on('add', function () {
hot.render();
})
.on('remove', function () {
hot.render();
});
// you'll have to make something like these until there is a better
// way to use the string notation, i.e. "bb:make"!
// normally, you'd get these from the server with .fetch()
function attr(attr) {
// this lets us remember `attr` for when when it is get/set
return {data: function (car, value) {
if (_.isUndefined(value)) {
return car.get(attr);
}
car.set(attr, value);
}};
}
// just setting `dataSchema: CarModel` would be great, but it is non-
// trivial to detect constructors...
function makeCar() {
return new CarModel();
}
// use the "good" Collection methods to emulate Array.splice
function hackedSplice(index, howMany /* model1, ... modelN */) {
var args = _.toArray(arguments).slice(2).concat({at: index}),
removed = this.models.slice(index, index + howMany);
this.remove(removed).add.apply(this, args);
return removed;
}
// show a log of events getting fired
function logEvents(event, model) {
var now = new Date(),
option = document.createElement('OPTION');
option.innerHTML = [':', now.getSeconds(), ':', now.getMilliseconds(), '[' + event + ']',
JSON.stringify(model)].join(' ');
eventHolder.insertBefore(option, eventHolder.firstChild);
}
Handsontable.Dom.addEvent(addCar, 'click', function () {
cars.add({make: "Tesla", model: "S", year: 2012, weight: 4647.3});
});
</script>
</div>
</div>
</div>
<div class="footer-text">
</div>
</div>
</div>
</div>
</div>
<div id="outside-links-wrapper"></div>
</body>
</html>