4bu/gist:1472571

## gistfile1.txt
<html>
    <head>
        <script src="jquery-1.7.1.min.js"></script>
        <script src="jquery.tmpl.js"></script>
        <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
        <script src="backbone.js"></script>
    </head>
    <body>

        You have <span class="js-wish-counter">0</span> wishes.
        <form class="js-add-wish">
            <input type="text" placeholder="pleace add your wish"/>
            <input type="submit" value="add"/>
        </form>

        <ul class="js-wish-list"></ul>

        <script id="wish-template" type="text/html">
            <li>
                ${ wish }
                <input type="button" class="js-delete" value="remove" />
            </li>
        </script>

        <script>
            $(function() {
                var WishCounterModel = Backbone.Model.extend({
                    dec: function () {
                        var count = this.get('counter');
                        this.set({counter: --count});
                    },

                    inc: function () {
                        var count = this.get('counter');
                        this.set({counter: ++count});
                    }
                });
                var WishCounterView = Backbone.View.extend({
                    el: '.js-wish-counter',
                    initialize: function () {
                        this.model.bind('change:counter', $.proxy(this.update, this));
                    },

                    update: function (counterModel, value) {
                        $(this.el).html(value);
                    }
                });

                var counterModel = new WishCounterModel();
                counterModel.set({counter: 0});

                var counterView = new WishCounterView({
                    model: counterModel
                });

                var WishModel = Backbone.Model.extend();
                var WishView = Backbone.View.extend({
                    events: {
                        'click .js-delete': 'remove'
                    },

                    initialize: function () {
                        _.bind(this, 'render', 'remove');
                    },

                    render: function () {
                        $(this.el).append(
                            $.tmpl(
                                $('#wish-template'),
                                {wish: this.model.get('wish')}
                            )
                        );

                        return this;
                    },

                    remove: function (event) {
                        $(event.target).parent('li').remove();
                        this.options.counterModel.dec();
                    }
                });

                var WishFormView = Backbone.View.extend({
                    el: '.js-add-wish',

                    events: {
                        'submit': 'add'
                    },

                    add: function (event) {
                        event.stopPropagation();
                        event.preventDefault();

                        var form = $(event.target),
                            input = $('input[type="text"]', form),
                            wish = input.val(),
                            wishModel = new WishModel(),
                            wishView;

                        if (wish.trim() === '') {
                            return;
                        }

                        wishModel.set({wish: wish});

                        wishView = new WishView({
                            model: wishModel,
                            counterModel: this.options.counterModel
                        });

                        $('.js-wish-list').append(wishView.render().el);

                        this.options.counterModel.inc();

                        input.val('');
                    }
                });

                var wishForm = new WishFormView({
                    counterModel: counterModel
                });
            }());
        </script>
    </body>
</html>
	<html>
	<head>
	<script src="jquery-1.7.1.min.js"></script>
	<script src="jquery.tmpl.js"></script>
	<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
	<script src="backbone.js"></script>
	</head>
	<body>

	You have <span class="js-wish-counter">0</span> wishes.
	<form class="js-add-wish">
	<input type="text" placeholder="pleace add your wish"/>
	<input type="submit" value="add"/>
	</form>

	<ul class="js-wish-list"></ul>

	<script id="wish-template" type="text/html">
	<li>
	${ wish }
	<input type="button" class="js-delete" value="remove" />
	</li>
	</script>

	<script>
	$(function() {
	var WishCounterModel = Backbone.Model.extend({
	dec: function () {
	var count = this.get('counter');
	this.set({counter: --count});
	},

	inc: function () {
	var count = this.get('counter');
	this.set({counter: ++count});
	}
	});
	var WishCounterView = Backbone.View.extend({
	el: '.js-wish-counter',
	initialize: function () {
	this.model.bind('change:counter', $.proxy(this.update, this));
	},

	update: function (counterModel, value) {
	$(this.el).html(value);
	}
	});

	var counterModel = new WishCounterModel();
	counterModel.set({counter: 0});

	var counterView = new WishCounterView({
	model: counterModel
	});

	var WishModel = Backbone.Model.extend();
	var WishView = Backbone.View.extend({
	events: {
	'click .js-delete': 'remove'
	},

	initialize: function () {
	_.bind(this, 'render', 'remove');
	},

	render: function () {
	$(this.el).append(
	$.tmpl(
	$('#wish-template'),
	{wish: this.model.get('wish')}
	)
	);

	return this;
	},

	remove: function (event) {
	$(event.target).parent('li').remove();
	this.options.counterModel.dec();
	}
	});

	var WishFormView = Backbone.View.extend({
	el: '.js-add-wish',

	events: {
	'submit': 'add'
	},

	add: function (event) {
	event.stopPropagation();
	event.preventDefault();

	var form = $(event.target),
	input = $('input[type="text"]', form),
	wish = input.val(),
	wishModel = new WishModel(),
	wishView;

	if (wish.trim() === '') {
	return;
	}

	wishModel.set({wish: wish});

	wishView = new WishView({
	model: wishModel,
	counterModel: this.options.counterModel
	});

	$('.js-wish-list').append(wishView.render().el);

	this.options.counterModel.inc();

	input.val('');
	}
	});

	var wishForm = new WishFormView({
	counterModel: counterModel
	});
	}());
	</script>
	</body>
	</html>