Permalink
Browse files

Improved extensibility for tag delimiters. Changed name of view.render()

to view.refresh(), since it both renders and links, and this could have
led to confusion. Some bug fixes on disposal of views.
  • Loading branch information...
1 parent 30eab65 commit 63b23d6a72c61291a4a6c8983949393799c8be95 @BorisMoore committed May 26, 2012
@@ -105,7 +105,7 @@ <h4>HTML:</h4>
&lt;!-- two-way data linking with convert and convertBack between data format (integer) and display name (text) -->
&lt;!-- Also show data value as tooltip -->
- &lt;td>&lt;input data-link="{intToDay:dayOff:dayToInt title{:dayOff}}" />&lt;/td>
+ &lt;td>&lt;input data-link="{intToDay:dayOff:dayToInt} title{:dayOff}" />&lt;/td>
</pre>
<h4>Script:</h4>
@@ -81,7 +81,7 @@ <h3>Accordion: Using dynamic switching of templates</h3>
/* Switch template of the selected view back to the summary template */
if ( selectedSubView ) {
selectedSubView.tmpl = "summaryTemplate";
- selectedSubView.render();
+ selectedSubView.refresh();
selectedSubView = null;
}
}
@@ -100,7 +100,7 @@ <h3>Accordion: Using dynamic switching of templates</h3>
/* Switch the template on this view to the detail template */
selectedSubView.tmpl = "detailTemplate";
- selectedSubView.render();
+ selectedSubView.refresh();
})
/* onclick handler for movie subviews when selected */
@@ -68,7 +68,7 @@ <h3>Tree view: using recursive nested {{for}} tags.</h3>
/* Toggle expanded property on data, then refresh rendering */
var view = $.view( this ).parent;
view.data.expanded = !view.data.expanded;
- view.render();
+ view.refresh();
})
</script>
@@ -43,7 +43,7 @@ <h3>Data-Linking to static content in the page</h3>
</p>
<p>
- <span data-link="{:~infoSummary(firstName, lastName, address.city, cars.quantity, true)}"></span>
+ <span data-link="html{:~infoSummary(firstName, lastName, address.city, cars.quantity, true)}"></span>
</p>
</div>
@@ -2,6 +2,7 @@
<html>
<head>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
+ <script src="http://www.JSON.org/json2.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>
@@ -13,48 +14,50 @@
<h3>Data Linking to Form Elements</h3>
-<div id="moviePrices"></div>
+<h4>Purchase a movie ticket</h4>
-<script id="moviePriceTemplate" type="text/x-jsrender">
- <h4>Purchase a movie ticket</h4>
+<div id="moviePurchase"></div>
+<script id="moviePurchaseTemplate" type="text/x-jsrender">
<div class="box">
<div class="subhead">Choose a movie</div>
<select id="selTheater" data-link="selectedMovie">
<option value="none">Choose...</option>
- {{for movies}}
+ {{for ~movies}}
<option value="{{:#index}}">{{:title}}</option>
{{/for}}
</select>
- <div data-link="visible{: selectedMovie!=='none' }">
+ <div data-link="visible{: selectedMovie!=='none' }">
- <div class="subhead">Name:</div>
- <div><input data-link="name" /></div>
+ <div class="subhead">Name:</div>
+ <div><input data-link="name" /></div>
- <div class="subhead">Special requests:</div>
- <div><textarea data-link="request" rows="4" cols="25" /></div>
-
- </div>
+ <div class="subhead">Special requests:</div>
+ <div><textarea data-link="request" rows="4" cols="25" /></div>
+ </div>
</div>
<div data-link="visible{: ~and(selectedMovie!=='none', name) }">
- <h3>Ticket order</h3>
+ <h3>Ticket order form</h3>
- <div class="box" data-link="visible{:name}">
+ <div id="orderForm" class="box" data-link="visible{:name}">
<div>Ticket for <em data-link="name" /> to movie: <em data-link="~selectedTitle(selectedMovie)" /></div>
<div data-link="visible{:request}"><em>Your special request:</em> <pre data-link="request" ></pre></div>
<div>
- <b>Ticket Price:</b> <span data-link="convertedPrice(selectedMovie, currency)" />
+ <b>Ticket Price:</b> <span data-link="~convertedPrice(selectedMovie, currency)" />
+ </div>
+ <div>
+ <button id="submitOrder">Submit order</button>
</div>
</div>
- <div>Currency Picker: <input type="checkbox" data-link="chooseCurrency" /></div>
+ <div>Currency Picker: <input type="checkbox" data-link="~app.chooseCurrency" /></div>
- <div class="box" data-link="visible{:chooseCurrency}">
+ <div class="box" data-link="visible{:~app.chooseCurrency}">
<div class="subhead">Choose Currency:</div>
<input type="radio" name="currencyPicker" value="US" data-link="currency" />US Dollars<br/>
<input type="radio" name="currencyPicker" value="EUR" data-link="currency" />Euro<br/>
@@ -66,22 +69,19 @@ <h3>Ticket order</h3>
<script type="text/javascript">
var currencies = {
- US: { rate: 1.0, symbol: "$" },
- EUR: { rate: 0.95, symbol: "" },
- GBP: { rate: 0.63, symbol: "£" }
- };
-
- var model = {
- name: "",
- selectedMovie: "none",
- currency: "US",
- convertedPrice: function(index, curCode) {
- var currency = currencies[curCode];
- if ( index >= 0) {
- return currency.symbol + parseFloat(this.movies[index].ticketPrice * currency.rate).toFixed(2);
- }
+ US: { rate: 1.0, symbol: "$" },
+ EUR: { rate: 0.95, symbol: "" },
+ GBP: { rate: 0.63, symbol: "£" }
+ },
+
+ orderDetails = {
+ name: "",
+ selectedMovie: "none",
+ currency: "US",
+ request: ""
},
- movies: [
+
+ movies = [
{
title: "The Red Violin",
ticketPrice: 18
@@ -94,19 +94,31 @@ <h3>Ticket order</h3>
title: "The Incredible Hulk",
ticketPrice: 21.99
}
- ]
- };
- contextHelpers = {
- currencies: currencies,
- selectedTitle: function(selectedMovie) {
- return (selectedMovie!=="none") ? model.movies[selectedMovie].title : "";
- },
- and: function(a, b) {
- return !!a && !!b;
- }
- }
+ ],
+
+ contextHelpers = {
+ app: {},
+ movies: movies,
+ convertedPrice: function(index, curCode) {
+ var currency = currencies[curCode];
+ if ( index >= 0) {
+ return currency.symbol + parseFloat(movies[index].ticketPrice * currency.rate).toFixed(2);
+ }
+ },
+ currencies: currencies,
+ selectedTitle: function(selectedMovie) {
+ return (selectedMovie!=="none") ? movies[selectedMovie].title : "";
+ },
+ and: function(a, b) {
+ return !!a && !!b;
+ }
+ };
+
+ $( "#moviePurchaseTemplate" ).link( orderDetails, "#moviePurchase", contextHelpers );
- $( "#moviePriceTemplate" ).link( model, "#moviePrices", contextHelpers );
+ $( "#submitOrder" ).on( "click", function() {
+ alert("You ordered a movie ticket as follows:\n" + JSON.stringify(orderDetails, null, 1).slice(1,-1));
+ });
</script>
</body>
</html>
@@ -55,7 +55,7 @@ <h1>Todos</h1>
edit: function( view ) {
editing = view;
view.tmpl = "editTemplate";
- view.render();
+ view.refresh();
$( view.nodes ).find('input').focus();
},
removeItem: function( index, item ) {
@@ -79,7 +79,7 @@ <h1>Todos</h1>
},
contentChanged: function( view ) {
view.tmpl = "itemTemplate";
- view.render();
+ view.refresh();
}
}
todos.completed = $( todos.items ).filter( function( index, val ) { return val.done; }).length;
Oops, something went wrong.

0 comments on commit 63b23d6

Please sign in to comment.