kmiyashiro/app.js

## app.js
var PageView = Backbone.View.extend({
    el: '#content',
    template: _.template($('#page-template').html()),

    events: {
        'click #back'   : 'back',
        'click #forward' : 'forward',
        'click #side'   : 'side'
    },

    initialize: function() {
        // constructor
        this.render();
    },

    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },

    back: function(e) {
        console.log('back');
    },

    forward: function(e) {
        console.log('forward')
    },

    side: function(e) {
        console.log('side')
    }
});
var pagemodel = new Page();
var newpage = new PageView({ model: pagemodel});

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>MTest</title>
    <link rel="stylesheet" href="styles/screen.css" type="text/css" media="screen" title="" charset="utf-8">

</head>
<body>

    <!-- Might want to make this a template and change it for each sub section and to display status -->
    <div id="page" class="page">
        <header>
            <h1>Test</h1>
        </header>
        <div id="content"></div>
    </div>

    <script src="ender.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        var Backbone = require('backbone'),
            _ = require('underscore');
    </script>

    <script id="page-template" type="text/template" charset="utf-8">
        <h2><%= name %></h2>
        <p>I'm template content!</p>
        <button id="back" value="back">Back</button>
        <button id="forward" value="forward">Forward</button>
        <button id="side" value="side">Side</button>
    </script>

    <!-- Views -->
    <script src="page.js" type="text/javascript" charset="utf-8"></script>

    <script src="app.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>

## page.js
var Page = Backbone.Model.extend({
    defaults: {
        name: 'New page',
        href: '/',
        templateUrl: null,
        active: false
    },

    initialize: function(config) {

    }
});
	var PageView = Backbone.View.extend({
	el: '#content',
	template: _.template($('#page-template').html()),

	events: {
	'click #back' : 'back',
	'click #forward' : 'forward',
	'click #side' : 'side'
	},

	initialize: function() {
	// constructor
	this.render();
	},

	render: function() {
	$(this.el).html(this.template(this.model.toJSON()));
	return this;
	},

	back: function(e) {
	console.log('back');
	},

	forward: function(e) {
	console.log('forward')
	},

	side: function(e) {
	console.log('side')
	}
	});
	var pagemodel = new Page();
	var newpage = new PageView({ model: pagemodel});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>MTest</title>
	<link rel="stylesheet" href="styles/screen.css" type="text/css" media="screen" title="" charset="utf-8">

	</head>
	<body>

	<!-- Might want to make this a template and change it for each sub section and to display status -->
	<div id="page" class="page">
	<header>
	<h1>Test</h1>
	</header>
	<div id="content"></div>
	</div>

	<script src="ender.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
	var Backbone = require('backbone'),
	_ = require('underscore');
	</script>

	<script id="page-template" type="text/template" charset="utf-8">
	<h2><%= name %></h2>
	<p>I'm template content!</p>
	<button id="back" value="back">Back</button>
	<button id="forward" value="forward">Forward</button>
	<button id="side" value="side">Side</button>
	</script>

	<!-- Views -->
	<script src="page.js" type="text/javascript" charset="utf-8"></script>

	<script src="app.js" type="text/javascript" charset="utf-8"></script>

	</body>
	</html>
	var Page = Backbone.Model.extend({
	defaults: {
	name: 'New page',
	href: '/',
	templateUrl: null,
	active: false
	},

	initialize: function(config) {

	}
	});