-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (89 loc) · 4.32 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!doctype html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title class='inspector_title' data-bind="text: title"></title>
<!-- DEPENDENCIES -->
<script type="text/javascript" src='../../vendor/jquery-1.8.0.js'></script>
<script type="text/javascript" src='../../vendor/knockback-core-stack-0.16.7.js'></script>
<script type="text/javascript" src="../../vendor/backbone-relational-0.6.0.js"></script>
<!-- KNOCKBACK-INSPECTOR LIBRARY -->
<script src='../../knockback-inspector.js'></script>
<!-- APPLICATION STYLING -->
<style type='text/css'>
#content {width: 800px; margin: 0 auto; background-color: #F5E0FF; border-radius: 5px;}
h1 {text-align: center; font-size: 2em; color: #fff; background-color: #CC66FF; border-radius: 5px;}
</style>
<link rel='stylesheet' href='../../knockback-inspector.css'>
<!-- KNOCKOUT INITIALIZATION -->
<script type='text/javascript'>
// set the template engine so Knockout can find 'kbi_model_node' and 'kbi_collection_node' templates
ko.setTemplateEngine(new kbi.TemplateEngine());
</script>
</head>
<body>
<div id='content'>
<h1 class='inspector_title' data-bind="text: title"></h1>
<!-- Step 1: Setting up the Project -->
<script type='text/javascript'>
var app_model = new Backbone.Model({title: 'Knockback Inspector (' + kbi.VERSION + ')'});
$('.inspector_title').each(function(){ ko.applyBindings(kb.viewModel(app_model), this); });
</script>
<!-- Step 2: Rendering a Backbone.Model using kb.ViewModel -->
<ul id='backbone_model' class='kbi root' data-bind="template: {name: 'kbi_model_node', data: kbi.nvm('root', true, $data)}"></ul>
<script type='text/javascript'>
var model1 = new Backbone.Model({name: 'Model1', pet: 'frog', friends: new Backbone.Collection([]), an_array: ['hello', 3]});
var model2 = new Backbone.Model({name: 'Model2', pet: 'dog', friends: new Backbone.Collection([]), an_array: [model1, model1.get('friends')]});
var model3 = new Backbone.Model({name: 'Model3', pet: '(none)', friends: new Backbone.Collection([]), an_array: [[model2], [model1]]});
model1.get('friends').reset([model2, model3]);
model2.get('friends').reset([model1, model3]);
model3.get('friends').reset([model1, model2]);
ko.applyBindings(kb.viewModel(model1), $('#backbone_model')[0]);
</script>
</br>
<!-- Step 3: Rendering a BackboneRelational using kb.CollectionObservable -->
<ul id='backbone_relational' class='kbi root' data-bind="template: {name: 'kbi_collection_node', data: kbi.nvm('root', true, $data)}"></ul>
<script type='text/javascript'>
var Person = Backbone.RelationalModel.extend({});
var House = Backbone.RelationalModel.extend({
relations: [{
type: Backbone.HasMany,
key: 'occupants',
relatedModel: 'Person',
reverseRelation: {
key: 'livesIn'
}
}]
});
var bob = new Person({id: 'person-1', name: 'Bob'});
var fred = new Person({id: 'person-2', name: 'Fred'});
var house = new House({
location: 'In the middle of our street',
occupants: ['person-1', 'person-2']
});
ko.applyBindings(kb.collectionObservable(house.get('occupants'), {view_model: kb.ViewModel}), $('#backbone_relational')[0]);
</script>
</br>
<!-- Step 4: Rendering a Twitter Query using kb.CollectionObservable -->
<ul class='kbi root' id='fetched_collection'>
<li class='kbi'>
<fieldset class='kbi'>
<label>URL</label>
<input type='text' data-bind="value: url, valueUpdate: 'keyup'">
</fieldset>
<ul class='kbi' data-bind="template: {name: 'kbi_collection_node', data: kbi.nvm('root', true, collection)}"></ul>
</li>
</ul>
<script type='text/javascript'>
var custom_url_model = new Backbone.Model({url: '', collection: new kbi.FetchedCollection()});
var view_model = kb.viewModel(custom_url_model);
view_model.url.subscribe(function(url){
custom_url_model.get('collection').url = url;
custom_url_model.get('collection').fetch();
});
ko.applyBindings(view_model, $('#fetched_collection')[0]);
view_model.url('http://search.twitter.com/search.json?q=knockbackjs&callback=?');
</script>
</div>
</body>
</html>