forked from BorisMoore/jsviews
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path04_form-elements_if-binding.html
125 lines (105 loc) · 3.82 KB
/
04_form-elements_if-binding.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
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
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.2.js" type="text/javascript"></script>
<script src="../../jsrender.js" type="text/javascript"></script>
<script src="../../jquery.observable.js" type="text/javascript"></script>
<script src="../../jquery.views.js" type="text/javascript"></script>
<link href="../resources/demos.css" rel="stylesheet" type="text/css" />
<link href="../resources/masterdetail.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="nav"><a href="../demos.html">JsViews Demos</a></div>
<h3>Data Linking to Form Elements</h3>
<div class="subhead">Dynamic content blocks use <em>{^{if}}</em> binding</div>
<h4>Purchase a movie ticket</h4>
<div id="moviePurchase"></div>
<script id="moviePurchaseTemplate" type="text/x-jsrender">
<div class="box">
<div class="subhead" data-link="~selectedTitle(selectedMovie) || 'Choose a movie'"></div>
<select data-link="selectedMovie" class="full">
<option value="none">Choose...</option>
{{for ~movies}}
<option value="{{:#index}}">{{>title}}</option>
{{/for}}
</select>
{^{if selectedMovie!=='none'}}
<div class="subhead" data-link="{:name ? 'Name:' : 'Type your name here:'}"></div>
<div><input data-link="name trigger=true" placeholder="Enter your name..."/></div>
{^{if name}}
<div class="subhead" data-link="{:request ? 'Special requests:' : 'Type special requests here:'}"></div>
<div><textarea data-link="request trigger=true" rows="4" cols="25" placeholder="Enter any special requests..."></textarea></div>
{{/if}}
{{/if}}
</div>
{^{if name && selectedMovie!=='none'}}
<h3>Ticket order form</h3>
<div class="box">
<div>Ticket for <em data-link="name" ></em> to movie: <em data-link="~selectedTitle(selectedMovie)" ></em></div>
{^{if request}}<em>Your special request:</em> <pre data-link="request" ></pre>{{/if}}
<div>
<b>Ticket Price:</b> <span data-link="~convertedPrice(selectedMovie, selectedCurrency)" ></span>
<div>Choose currency for payment: <input type="checkbox" data-link="~app.chooseCurrency" /></div>
</div>
<div>
<button id="submitOrder">Submit order</button>
</div>
</div>
{^{if ~app.chooseCurrency}}
<div class="box">
<div class="subhead">Choose Currency:</div>
{{for ~currencies ~details=#data}}
<input type="radio" name="currencyPicker" value="{{:#index}}" data-link="~details.selectedCurrency" />{{:label}}<br/>
{{/for}}
</div>
{{/if}}
{{/if}}
</script>
<script type="text/javascript">
var currencies = [
{ name:"US", label:"US Dollar", rate: 1.0, symbol: "$" },
{ name:"EUR", label:"Euro", rate: 0.95, symbol: "€" },
{ name:"GB", label:"Pound", rate: 0.63, symbol: "£" }
],
orderDetails = {
name: "",
selectedMovie: "none",
selectedCurrency: 1,
request: ""
},
movies = [
{
title: "The Red Violin",
ticketPrice: 18
},
{
title: "The Inheritance",
ticketPrice: 16.5
},
{
title: "The Incredible Hulk",
ticketPrice: 21.99
}
],
contextHelpers = {
app: {},
movies: movies,
convertedPrice: function(selected, selectedCurrency) {
var currency = currencies[selectedCurrency];
if ( selected !== "none") {
return currency.symbol + parseFloat(movies[selected].ticketPrice * currency.rate).toFixed(2);
}
},
currencies: currencies,
selectedTitle: function(selectedMovie) {
return (selectedMovie!=="none") ? movies[selectedMovie].title : "";
}
};
$.templates( "moviePurchaseTemplate", "#moviePurchaseTemplate" );
$.link.moviePurchaseTemplate( "#moviePurchase", orderDetails, contextHelpers );
$( "#moviePurchase" ).on( "click", "#submitOrder", function() {
alert("You ordered a movie ticket as follows:\n" + (window.JSON ? JSON.stringify(orderDetails, null, 1).slice(1,-1) : orderDetails.selectedMovie));
});
</script>
</body>
</html>