Skip to content
Browse files

added examples and tests for using the value binding with select boxes

  • Loading branch information...
1 parent aeb43d7 commit ae13034d5a9dd20d162e239ade15ad0b17073c9d @politician committed Feb 27, 2012
Showing with 156 additions and 22 deletions.
  1. +88 −0 examples/example3.html
  2. +68 −22 spec/bindings/value.spec.js
View
88 examples/example3.html
@@ -0,0 +1,88 @@
+<!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 3</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 Example</h2>
+
+ <p>This example uses the <i>value</i> bindings to keep a select control updated with the values of the form fields.<p>
+
+ <p>Mode of Transport:
+ <select data-bind="value: @transport">
+ <option value="car">Car</option>
+ <option value="boat">Boat</option>
+ <option value="train">Train</option>
+ </select>
+ </p>
+ <p>You selected: <span data-bind="text: @transport"></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: {
+ transport: 'badval'
+ },
+
+ initialize: function() {
+ }
+
+ });
+
+// ... and lift off!
+
+ $(function () {
+ window.app = new MainView({
+ model: new MainModel()
+ });
+ });
+ </script>
+</body>
+</html>
View
90 spec/bindings/value.spec.js
@@ -1,37 +1,83 @@
describe('the value binding', function() {
- beforeEach(function() {
- this.model = new AModel({firstName: 'Abram'});
- this.view = new FixtureView({model: this.model});
- _.extend(this.view, {
- innerHtml: "<input type='text' data-bind='value: @firstName'>"
+ describe('should work with input controls', function() {
+
+ beforeEach(function() {
+ this.model = new AModel({firstName: 'Abram'});
+ this.view = new FixtureView({model: this.model});
+ _.extend(this.view, {
+ innerHtml: "<input type='text' data-bind='value: @firstName'>"
+ })
+
+ this.view.render();
+ this.el = this.view.$('#anchor input');
+ });
+
+ afterEach(function() {
+ this.view.remove();
})
- this.view.render();
- this.el = this.view.$('#anchor input');
- });
+ it('should update the value of the DOM element when the model changes', function() {
+ expect(this.el.size() > 0).toBeTruthy();
+ expect(this.el.val()).toBe('Abram');
- afterEach(function() {
- this.view.remove();
- })
+ this.model.set({firstName: 'Abraham'});
- it('should update the value of the DOM element when the model changes', function() {
- expect(this.el.size() > 0).toBeTruthy();
- expect(this.el.val()).toBe('Abram');
+ expect(this.el.val()).toBe('Abraham');
+ });
+
+ it('should update the model when the value of the DOM element changes', function() {
+ expect(this.el.size() > 0).toBeTruthy();
+ expect(this.el.val()).toBe('Abram');
- this.model.set({firstName: 'Abraham'});
+ this.el.val('Abraham');
+ this.el.trigger('change');
- expect(this.el.val()).toBe('Abraham');
+ expect(this.model.get('firstName')).toBe('Abraham');
+ });
+
});
+
+ describe('should work with select controls', function() {
- it('should update the model when the value of the DOM element changes', function() {
- expect(this.el.size() > 0).toBeTruthy();
- expect(this.el.val()).toBe('Abram');
+ beforeEach(function() {
+ this.model = new AModel({transport: 'car'});
+ this.view = new FixtureView({model: this.model});
+ _.extend(this.view, {
+ innerHtml: "<select type='text' data-bind='value: @transport'> \
+ <option value='car'>Car</option> \
+ <option value='boat'>Boat</option> \
+ <option value='train'>Train</option> \
+ </select>"
+ })
+
+ this.view.render();
+ this.el = this.view.$('#anchor select');
+ });
- this.el.val('Abraham');
- this.el.trigger('change');
+ afterEach(function() {
+ this.view.remove();
+ })
- expect(this.model.get('firstName')).toBe('Abraham');
+ it('should update the value of the DOM element when the model changes', function() {
+ expect(this.el.size() > 0).toBeTruthy();
+ expect(this.el.val()).toBe('car');
+
+ this.model.set({transport: 'boat'});
+
+ expect(this.el.val()).toBe('boat');
+ });
+
+ it('should update the model when the value of the DOM element changes', function() {
+ expect(this.el.size() > 0).toBeTruthy();
+ expect(this.el.val()).toBe('car');
+
+ this.el.val('boat');
+ this.el.trigger('change');
+
+ expect(this.model.get('transport')).toBe('boat');
+ });
+
});
describe('helps prevent XSS attacks', function() {

0 comments on commit ae13034

Please sign in to comment.
Something went wrong with that request. Please try again.