jquerymx/model/list/list-insert.html at donejs · stadscript/jquerymx · 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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>Model List Insert 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>Model List Demo</h1>
			<p>This demo shows how you might use Lists to implement deleting a list
			of contacts.</p>
		</div>
<div id="demo-html">
<div id='contacts'></div>
<div id='update'></div>
</div>


<script type='text/javascript'
        src='../../../steal/steal.js'>
</script>
<script type='text/javascript' id="demo-source">
steal('jquery/model',
      'jquery/dom/fixture',
      'jquery/model/list',
	  function(){

// =============== SETUP FIXTURES ===============

$.fixture("GET /recipes.json", function(){
	return [[{'id': 1,'name' : 'Justin Meyer','birthday': '1982-10-20'},
	       {'id': 2,'name' : 'Brian Moschel','birthday': '1983-11-10'},
	       {'id': 3,'name' : 'Alex Gomes','birthday': '1980-2-10'}]];
});
$.fixture("PUT /recipes/{id}.json", function(){
	return {};
})

// =============== Contact Model ===============

$.Model("Contact",{
	attributes : {
		birthday : 'date'
	},
	convert : {
		// a converter to handle dates like 12-12-2012
		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;
			}
		}
	},
	findAll : "/recipes.json",
	update : "/recipes/{id}.json"
},{
	ageThisYear : function(){
		return new Date().getFullYear() -
		      this.birthday.getFullYear()
	},
	getBirthday : function(){
		return ""+this.birthday.getFullYear()+
			"-"+(this.birthday.getMonth()+1)+
			"-"+this.birthday.getDate();
	}

});

// =============== updaterWidget ===============

makeAgeUpdater = function(contact){
	var updater = $("#update")

	// clear the old update content and add the contact's bday
	updater.html("")
	       .append(contact.name+"'s birthday");

	// create an input element
	$('<input/>')
		// set the contacts birthday as val
		.val(contact.attr("birthday"))
		// when the input changes, update the contact with the value
		.change(function(){
			contact.update({
				'birthday': this.value
			})
		})
		// add the input to the updater
		.appendTo(updater)
};

// =============== Listen for updates ===============

Contact.bind("updated", function(ev, contact){

	// use the list to get the instance from the element
    contact.elements($('#contacts'))
      .html(contact.name+" "+contact.ageThisYear()+
          " <a>Show</a>");
});

// =============== Draw out Contacts ===============

Contact.findAll({},function(contacts){
	var contactsEl = $('#contacts'),
		html = [],
		contact;

	// collect contact html
	for(var i =0; i < contacts.length;i++){
		contact = contacts[i]
	html.push("<li class='contact ",
		contact.identity(), //add the identity to the className manually
		"'>",
		contact.name+" "+contact.ageThisYear()+
	                " <a>Show</a>",
		"</li>")
	}
	// insert contacts html
	contactsEl.html(html.join(""))

	contactsEl.delegate("li","click", function(){
	 // use the contacts list to get the
	 // contact from the clicked element
	 var contact = contacts.get(this)[0]
	 makeAgeUpdater( contact );
	});

});

})

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