-
Notifications
You must be signed in to change notification settings - Fork 9
/
5b-PublishAndSubscribe.html
85 lines (77 loc) · 2.55 KB
/
5b-PublishAndSubscribe.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
<!DOCTYPE html>
<html>
<head>
<title>Get Products</title>
</head>
<body>
<div class="main-content">
<h1>All Products</h1>
<div id="sampleArea"></div>
</div>
<div id="alertArea"></div>
<div id="addProductDiv">
<h5>Add Product</h5>
<form id="addProductForm">
<div>
<label for="productName">Product Name</label>
<input type="text" name="productName" placeholder="Product" />
</div>
<div>
<label for="category">Category</label>
<input type="text" name="category" placeholder="Category" />
</div>
<div>
<label for="price">Price</label>
<input type="number" name="price" min="0" />
</div>
<button id='addProductButton'>Add</button>
</form>
</div>
<div><button id='clearProductsButton'>Clear</button></div>
<script id="productTmpl" type="text/template">
<ul>
{{#products}}
<li>{{productName}} {{category}} {{price}}</li>
{{/products}}
</ul>
{{^products}}
<p>No products listed.</p>
{{/products}}
</script>
<script src="Scripts/jquery-1.4.4.js"></script>
<script src="Scripts/mustache.js"></script>
<script src="Scripts/amplify.js"></script>
<script src="Scripts/app/utils.js"></script>
<script src="Scripts/app/product.js"></script>
<script>
var p = app.product;
updateProductDisplay();
function updateProductDisplay() {
var products = p.all();
var template = $("#productTmpl").html();
var html = Mustache.to_html(template, products);
$('#sampleArea').html(html);
}
// Add product button handler creates a new PRODUCT object
// which publishes the addition
$("#addProductButton").click(function () {
var form = $('#addProductForm');
p.create(
form.find('[name=productName]').val(),
form.find('[name=category]').val(),
form.find('[name=price]').val()
);
form.find('input').val('');
});
amplify.subscribe("productCreated", function (product) {
p.add(product);
});
amplify.subscribe("productsStoreUpdated", function() {
updateProductDisplay();
});
$("#clearProductsButton").click(function () {
p.clear();
});
</script>
</body>
</html>