jquerypp/model/list/cookie/cookie.html at docs · labogdan/jquerypp · GitHub

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>Model List Cookie Demo</title>
        <style type='text/css'>
            body {font-family: verdana}
            li {border: solid 1px gray; padding: 5px; width: 250px;}
			li a {color: red; font-weight: bold;}
			p {width: 400px;}
        </style>
	</head>
	<body>
		<div id="demo-instructions">
			<h1>Cookie List Demo</h1>
			<p>This demo show keeping data stored in a cookie.  Create a few contacts,
			refresh the page, and they should still be present.</p>
		</div>
<div id="demo-html">
<h2>Create A Contact</h2>
<form action='' id='contact'>
	<label>Name</label>
	<input type='text' name='name'/> <br/>
	<label>Birthday</label>
	<input type='text' name='birthday' value='1982-10-20'/>
	(must be like 1982-10-20)<br/>
	<input type='submit' value='Create' />
</form>
<h2>List of Contacts</h2>
<div id='contacts'></div>
</div>

<script type='text/javascript'
        src='../../../../steal/steal.js'>
</script>
<script type='text/javascript'>
steal('jquerypp/model',
		'jquerypp/model/list/cookie',
		'jquerypp/dom/form_params').then(function(){

$.Model("Contact",{
	attributes : {
		birthday : 'date'
	},
	convert : {
		date : function(raw){
			if(typeof raw == 'string'){
				var matches = raw.match(/(\d+)-(\d+)-(\d+)/)
				return new Date( +matches[1],
				                 (+matches[2])-1,
				                 +matches[3] )
			}else if(raw instanceof Date){
				return raw;
			}
		}
	}
},{
	ageThisYear : function(){
		return new Date().getFullYear() -
		      this.birthday.getFullYear()
	},
	getBirthday : function(){
		return ""+this.birthday.getFullYear()+
			"-"+(this.birthday.getMonth()+1)+
			"-"+this.birthday.getDate();
	}

});

// Create a contact list
$.Model.List.Cookie("Contact.List");

// A helper function for adding a contact to the page
var addContact = function(contact){
	 var li = $('<li>')
              .model(contact)
              .html(contact.name+" "+contact.ageThisYear())
              .appendTo($("#contacts"));
}
$(function(){
	// pull saved contacts into this list
	var contacts = new Contact.List([]).retrieve("contacts");

	// add each contact to the page
	contacts.each(function(){
		addContact(this);
	});

	// when a new cookie is crated
	$("#contact").submit(function(ev){
		ev.preventDefault();
		var data = $(this).formParams();

		// gives it a random id
		data.id = +new Date();
		var contact = new Contact(data);

		//add it to the list of contacts
		contacts.push(contact);

		//store the current list
		contacts.store("contacts");

		//show the contact
		addContact(contact);
	})
})
})

</script>
	</body>
</html>