thecountofzero/bindings.html

## bindings.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CanJS Bindings Test</title>
</head>
<body>

    <div id='live'>
        <button class="atbat">Add At Bat</button>
        <button class="hit">Add Hit</button>
        <button class="destroy">Destroy</button><br/><br/>
    </div>

    <script id="dummyEJS" type="text/ejs">
        <div><%= player.attr("name") %>: <%= state.attr("average") %></div>
    </script>

    <script src='../../steal/steal.js'></script>
    <script type='text/javascript'>
        steal('can',function(){

            Player = can.Model({
                findOne: function() {
                    var def = $.Deferred();

                    setTimeout(function() {
                        def.resolve({
                            "id": 'RYANBRAUN',
                            "name": "Ryan Braun",
                            "homeruns": 2,
                            "atbats": 20,
                            "hits": 12
                        });

                    }, 100);
                    return def;
                }
            }, {});

            Control = can.Control({
                init: function() {
                    var self = this;
                    this.state = new can.Observe();
                    Player.findOne().then(function(p) {
                        self.player = p;
                        self.options.avg = can.compute(function() {
                            return (p.attr('hits') / p.attr('atbats')).toFixed(3)
                        });
                        self.on();
                        self.state.attr("average", self.options.avg());
                        self.element.append(can.view('dummyEJS', {
                            player: p,
                            state: self.state
                        }));
                    });
                },

                '{avg} change': function(compute, ev, newVal, oldVal) {
                    this.state.attr("average", newVal);
                    console.log('avg changed to: ' + newVal);
                },

                '.atbat click': function(el, ev) {
                    this.player.attr('atbats', this.player.attr('atbats')+1);
                },

                '.hit click': function(el, ev) {
                    can.Observe.startBatch();
                    this.player.attr('atbats', this.player.attr('atbats')+1);
                    this.player.attr('hits', this.player.attr('hits')+1);
                    can.Observe.stopBatch();
                },

                ".destroy click": function() {
                    console.log('destroy clicked');
                    this.destroy();
                },

                destroy: function() {
                    this.element.empty();
                    console.log('destroyed');
                    can.Control.prototype.destroy.call(this);
                }
            });

            new Control("#live");

        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>CanJS Bindings Test</title>
	</head>
	<body>

	<div id='live'>
	<button class="atbat">Add At Bat</button>
	<button class="hit">Add Hit</button>
	<button class="destroy">Destroy</button><br/><br/>
	</div>

	<script id="dummyEJS" type="text/ejs">
	<div><%= player.attr("name") %>: <%= state.attr("average") %></div>
	</script>

	<script src='../../steal/steal.js'></script>
	<script type='text/javascript'>
	steal('can',function(){

	Player = can.Model({
	findOne: function() {
	var def = $.Deferred();

	setTimeout(function() {
	def.resolve({
	"id": 'RYANBRAUN',
	"name": "Ryan Braun",
	"homeruns": 2,
	"atbats": 20,
	"hits": 12
	});

	}, 100);
	return def;
	}
	}, {});

	Control = can.Control({
	init: function() {
	var self = this;
	this.state = new can.Observe();
	Player.findOne().then(function(p) {
	self.player = p;
	self.options.avg = can.compute(function() {
	return (p.attr('hits') / p.attr('atbats')).toFixed(3)
	});
	self.on();
	self.state.attr("average", self.options.avg());
	self.element.append(can.view('dummyEJS', {
	player: p,
	state: self.state
	}));
	});
	},

	'{avg} change': function(compute, ev, newVal, oldVal) {
	this.state.attr("average", newVal);
	console.log('avg changed to: ' + newVal);
	},

	'.atbat click': function(el, ev) {
	this.player.attr('atbats', this.player.attr('atbats')+1);
	},

	'.hit click': function(el, ev) {
	can.Observe.startBatch();
	this.player.attr('atbats', this.player.attr('atbats')+1);
	this.player.attr('hits', this.player.attr('hits')+1);
	can.Observe.stopBatch();
	},

	".destroy click": function() {
	console.log('destroy clicked');
	this.destroy();
	},

	destroy: function() {
	this.element.empty();
	console.log('destroyed');
	can.Control.prototype.destroy.call(this);
	}
	});

	new Control("#live");

	});
	</script>
	</body>
	</html>