Skip to content

Commit a718adf

Browse files
author
Pinhook
committed
more model demos and fun
1 parent ae934b3 commit a718adf

File tree

8 files changed

+583
-58
lines changed

8 files changed

+583
-58
lines changed

‎model/list/list-insert.html‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2+
"http://www.w3.org/TR/html4/strict.dtd">
3+
<html lang="en">
4+
<head>
5+
<title>Model Events Demo</title>
6+
<style type='text/css'>
7+
body {font-family: verdana}
8+
li {border: solid 1px gray; padding: 5px; width: 250px;}
9+
li a {color: red; font-weight: bold;}
10+
p {width: 400px;}
11+
</style>
12+
</head>
13+
<body>
14+
<div id="demo-instructions">
15+
<h1>Model List Demo</h1>
16+
<p>This demo shows how you might use Lists to implement deleting a list
17+
of contacts.</p>
18+
</div>
19+
<div id="demo-html">
20+
<div id='contacts'></div>
21+
<a href='javascript://' id='destroyAll'>DESTROY ALL</a>
22+
</div>
23+
24+
25+
<script type='text/javascript'
26+
src='../../../steal/steal.js'>
27+
</script>
28+
<script type='text/javascript'>
29+
steal.plugins('jquery/model',
30+
'jquery/dom/fixture',
31+
'jquery/model/list').start()
32+
</script>
33+
<script type='text/javascript'>
34+
$.Model.extend("Contact",{
35+
attributes : {
36+
birthday : 'date'
37+
},
38+
convert : {
39+
date : function(raw){
40+
if(typeof raw == 'string'){
41+
var matches = raw.match(/(\d+)-(\d+)-(\d+)/)
42+
return new Date( +matches[1],
43+
(+matches[2])-1,
44+
+matches[3] )
45+
}else if(raw instanceof Date){
46+
return raw;
47+
}
48+
}
49+
},
50+
findAll : function(params, success, error){
51+
$.get("/recipes.json",
52+
{},
53+
this.callback(['wrapMany',success]),
54+
"json",
55+
function(){
56+
return [[{'id': 1,'name' : 'Justin Meyer','birthday': '1982-10-20'},
57+
{'id': 2,'name' : 'Brian Moschel','birthday': '1983-11-10'},
58+
{'id': 3,'name' : 'Alex Gomes','birthday': '1980-2-10'}]];
59+
})
60+
},
61+
update : function(id, attrs, success, error){
62+
$.post("/recipes.json",{},success,'json',function(){
63+
return [attrs]
64+
})
65+
}
66+
},{
67+
ageThisYear : function(){
68+
return new Date().getFullYear() -
69+
this.birthday.getFullYear()
70+
},
71+
getBirthday : function(){
72+
return ""+this.birthday.getFullYear()+
73+
"-"+(this.birthday.getMonth()+1)+
74+
"-"+this.birthday.getDate();
75+
}
76+
77+
});
78+
DESTROYFIXTURE = function(){
79+
return [true]
80+
}
81+
</script>
82+
<script type='text/javascript' id="demo-source">
83+
$.Model.List.extend("Contact.List",{
84+
destroyAll : function(){
85+
$.post("/destroy",
86+
// get a list of ids
87+
this.map(function(contact){
88+
return contact.id
89+
}),
90+
this.callback('destroyed'),
91+
'json', DESTROYFIXTURE)
92+
},
93+
destroyed : function(){
94+
// call destroyed to publish OpenAjax
95+
// and trigger events
96+
this.each(function(){
97+
this.destroyed();
98+
})
99+
}
100+
});
101+
102+
// Draw a list of contacts
103+
Contact.findAll({},function(contacts){
104+
var contactsEl = $('#contacts'),
105+
html = [],
106+
contact;
107+
108+
for(var i =0; i < contacts.length;i++){
109+
contact = contacts[i];
110+
html.push("<li class='contact ",
111+
contact.identity(),"'>",
112+
"<input type='checkbox'/> ",
113+
contact.name," ",
114+
contact.ageThisYear(),
115+
" <a>Show</a></li>")
116+
contact.bind("destroyed", function(){
117+
this.elements().remove();
118+
})
119+
}
120+
contactsEl.html(html.join(""))
121+
122+
$("#destroyAll").click(function(){
123+
// use the list to get all contacts
124+
contacts.get( $("#contacts input:checked").closest(".contact") )
125+
// destroy them
126+
.destroyAll();
127+
})
128+
129+
});
130+
131+
132+
</script>
133+
</body>
134+
</html>

‎model/list/list.html‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,16 @@
1111
</style>
1212
</head>
1313
<body>
14-
<h1>Model List Demo</h1>
15-
<p>This demo shows how you might use Lists to implement deleting a list
16-
of contacts.</p>
17-
<div id='contacts'></div>
18-
<a href='javascript://' id='destroyAll'>DESTROY ALL</a>
14+
<div id="demo-instructions">
15+
<h1>Model List Demo</h1>
16+
<p>This demo shows how you might use Lists to implement deleting a list
17+
of contacts.</p>
18+
</div>
19+
<div id="demo-html">
20+
<div id='contacts'></div>
21+
<a href='javascript://' id='destroyAll'>DESTROY ALL</a>
22+
</div>
23+
1924

2025
<script type='text/javascript'
2126
src='../../../steal/steal.js'>
@@ -25,9 +30,8 @@ <h1>Model List Demo</h1>
2530
'jquery/dom/fixture',
2631
'jquery/model/list').start()
2732
</script>
28-
<script type='text/javascript'>
29-
30-
$.Model.extend("Contact",{
33+
<script type='text/javascript'>
34+
$.Model.extend("Contact",{
3135
attributes : {
3236
birthday : 'date'
3337
},
@@ -71,48 +75,55 @@ <h1>Model List Demo</h1>
7175
}
7276

7377
});
74-
78+
DESTROYFIXTURE = function(){
79+
return [true]
80+
}
81+
</script>
82+
<script type='text/javascript' id="demo-source">
7583
$.Model.List.extend("Contact.List",{
7684
destroyAll : function(){
7785
$.post("/destroy",
86+
// get a list of ids
7887
this.map(function(contact){
7988
return contact.id
8089
}),
8190
this.callback('destroyed'),
82-
'json',
83-
function(){
84-
return [true]
85-
})
91+
'json', DESTROYFIXTURE)
8692
},
8793
destroyed : function(){
94+
// call destroyed to publish OpenAjax
95+
// and trigger events
8896
this.each(function(){
8997
this.destroyed();
9098
})
9199
}
92100
});
93101

94-
// List 1
102+
// Draw a list of contacts
95103
Contact.findAll({},function(contacts){
96104
var contactsEl = $('#contacts');
97105
$.each(contacts, function(i, contact){
98106
var li = $('<li>')
99107
.model(contact)
100108
.html("<input type='checkbox'/> "+
101-
contact.name+" "+contact.ageThisYear()+
109+
contact.name+" "+
110+
contact.ageThisYear()+
102111
" <a>Show</a>")
103112
.appendTo(contactsEl);
104-
contact.bind("destroyed", function(){
113+
// on destroyed, remove elements
114+
contact.bind("destroyed", function(){
105115
li.remove();
106116
})
107117
});
108118
});
109119

110120
$("#destroyAll").click(function(){
111-
$("#contacts input:checked").closest(".contact").models().destroyAll();
121+
//get all checked input model instances
122+
$("#contacts input:checked").closest(".contact")
123+
.models()
124+
// destroy them
125+
.destroyAll();
112126
})
113-
114-
115-
116127
</script>
117128
</body>
118129
</html>

0 commit comments

Comments
 (0)