jquerymx/model/demo-encapsulate.html at master · jupiterjs/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
146
147
148
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>Grid / Encapsulate Demo</title>
        <style type='text/css'>
            body {font-family: verdana}

        </style>
	</head>
	<body>
<div id="demo-instructions">
<h1>Model Encapsulate Demo</h1>
<p>This demonstrates how encapsulating Ajax functionality in
	models makes your code more reusable.  The same grid
	widget uses two different models.
</p>
</div>
<div id="demo-html">
<h2>Recipe Grid</h2>
<div id='recipes'></div>
<h2>Work Item Grid</h2>
<div id='workItems'></div>
</div>
<script type='text/javascript'
        src='../../steal/steal.js'>
</script>
<script type='text/ejs' id='listView'>
	<table cellspacing='0px'>
	<thead>
	<tr>
	    <% for(var attr in model.attributes){%>
	        <% if(attr == 'id') continue;%>
	        <th><%= attr %> </th>
	    <%}%>
	    <th>Options</th>
	</tr>
	</thead>
	<tbody>
		<% for(var i =0; i < items.length;i++){ %>
			<tr <%= items[i] %>>
				<%== view('itemView',{item: items[i], model : model})%>
			</tr>
		<%} %>

	</tbody>
</table>
</script>
<script type='text/ejs' id='itemView'>
	<%for(var attribute in model.attributes){%>
	    <%if(attribute == 'id') continue;%>
	    <td class='<%= attribute %>'>
	            <input type="text" value="<%= item[attribute]%>" name="<%= attribute%>"/>
	    </td>
	<%}%>
	<td>
	    <input type='submit' value='Update' class='update'/>
	    <a href='javascript://' class='cancel'>cancel</a>
	</td>
</script>
<script type='text/javascript'>

</script>
<script type='text/javascript' id="demo-source">
steal('jquery/model',
	'jquery/controller',
	'jquery/dom/form_params',
	'jquery/dom/fixture',
	'jquery/view/ejs',
	function(){

// Use fixtures to make 4 recipes
$.fixture.make("recipe",4, function(i, messages){
	return {
		title: "Recipe "+i,
		instructions: "Here are some instructions"
	}
})
// Use fixtures to make 4 work items
$.fixture.make("workitem",4, function(i, messages){
	return {
		task: "item "+i,
		instructions: "Here are some instructions",
		assignedTo : i%2? "Brian" : "Justin"
	}
})


// A grid widget
$.Controller("Grid",{
	// when added to an element, use the model
	// to find items
	init : function(){
		this.options.model.findAll({},this.callback('list'))
	},
	// draw the items in this element
	list : function(items){
		this.element.html("listView", {model : this.options.model, items: items})
	},
	// on update, get values, and update model instance
	".update click" : function(el){
		// get the tr that has our new model data
		var tr =  el.closest('tr'),

			// get the model isntance
			item = tr.model();

		// make it look like we are updating
		el.val("updating ...").attr("disabled", true)

		// update the model instance
		item.update(tr.formParams(), this.proxy('updated'));
	},
	updated : function(item){
		// update the html
		item.elements(this.element).html('itemView',
			{model : this.options.model, item: item})
	},
	// on cancel, use the existing model to redraw html
	".cancel click" : function(el){
		var tr =  el.closest('tr')
			item = tr.model();
		tr.html('itemView',{model : this.options.model, item: item})
	}
})

// A Recipe model that implements findAll and update
$.Model("Recipe",{
	findAll : "/recipes.json",
	update : "/recipes/{id}.json"
},{});

// A WorkItem model that implements findAll and update
$.Model("Workitem",{
	findAll : "/workitems.json",
	update : "/workitems/{id}.json"
},{});

// Add a grid with recipes
$("#recipes").grid({model: Recipe});

// Add a grid with workitems
$("#workItems").grid({model: Workitem});

});
</script>
	</body>
</html>