added an example of using a multiple select list control

dzrw · Jul 18, 2012 · 9db788d · 9db788d
1 parent e08fdf1
commit 9db788d
Showing 1 changed file with 89 additions and 0 deletions.
diff --git a/examples/example4.html b/examples/example4.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/>
+  <title>Example 4</title>
+
+  <!-- include source files here... -->
+  <script type="text/javascript" src="../lib/jquery.js"></script>
+  <script type="text/javascript" src="../lib/underscore.js"></script>
+  <script type="text/javascript" src="../lib/backbone.js"></script>
+  <script type="text/javascript" src="../lib/rj.min.js"></script>
+  <script type="text/javascript" src="../outback.js"></script>
+
+</head>
+<body id="fixture">
+
+   <h2>The select multiple Example</h2>
+
+   <p>This example uses the <i>value</i> binding to work with a multiple select list box.<p>
+
+   <p>Mode of Transport: 
+      <select multiple data-bind="value: @cars">
+         <option value="volvo">Volvo</option>
+         <option value="saab">Saab</option>
+         <option value="mercedes">Mercedes</option>
+         <option value="bmw">BMW</option>
+      </select>
+   </p>
+   <p>You selected: <span data-bind="text: @cars"></span></p>
+
+
+   <script type="text/javascript">
+
+// MainView is the ... main view.
+
+      var MainView = Backbone.View.extend({
+         el: '#fixture',
+
+         initialize: function() {
+            this.render();
+         },
+
+         render: function() {
+
+// Tell outback to get to work.
+
+            Backbone.outback.bind(this);
+         },
+
+         remove: function() {
+
+// Tell outback to clean up event handlers and whatnot.
+
+            Backbone.outback.unbind(this);
+         },
+
+         bindingSummary: function(summary) {
+            if (!console || typeof console.log !== 'function') return;
+
+// This is an optional hook which outback will call when it's finished binding
+// the view.  It's useful for debugging.  
+
+            console.log(summary);
+         }
+      });
+
+
+// MainModel holds the details of our form.
+
+      var MainModel = Backbone.Model.extend({
+         defaults: {
+            cars: ['volvo','bmw']
+         },
+
+         initialize: function() {
+         }
+
+      });
+
+// ... and lift off!
+
+      $(function () {
+         window.app = new MainView({
+            model: new MainModel()
+         });
+      });
+   </script>
+</body>
+</html>