waylan/knockback-relations.html

## knockback-relations.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Sample</title>
	<link rel="stylesheet" href="base.css">

</head>
<body>
	<section id="app" kb-inject="AppViewModel">

        <section id="departments">
            <h2>Departments</h2>
            <ul data-bind="foreach: departments">
                <li>
                    <input data-bind="value: name"/>
                    <input data-bind="value: location"/>
                </li>
            </ul>
            <button data-bind="click: addDepartment">Add Department</button>
        </section>

        <section id="employees">
            <h2>Employees</h2>
            <ul data-bind="foreach: employees">
                <li>
                    <input data-bind="value: name"/>
                    <span data-bind="text: department().name"></span>
                    <select data-bind="options: $root.departments().name, optionsText: department"></select>
                </li>
            </ul>
            <button data-bind="click: addEmployee">Add Employee</button>
        </section>

	</section>

	<!-- App Dependencies -->
	<script type="text/javascript" src="zepto.js"></script>
	<script type="text/javascript" src="knockback-full-stack.min.js"></script>
	<script type="text/javascript" src="backbone-relational.js"></script>

	<!-- App and Components -->
<script type="text/javascript">//<![CDATA[
(function() {

    // Model Defs using Backbone-relational

    var Department = Backbone.RelationalModel.extend({
        // Keys: name, location
    });

    var DepartmentCollection = Backbone.Collection.extend({
        model: Department
    });

    var Employee = Backbone.RelationalModel.extend({
        // Keys: name, department
        relations: [{
            type: Backbone.HasOne,
            key: 'department',
            relatedModel: Department,
            collectionType: DepartmentCollection
            // we don't need a reserve relation here
        }]
    });

    var EmployeeCollection = Backbone.Collection.extend({
        model: Employee
    });

    // ViewModels using Knockback

    var DepartmentViewModel = function(model){
        this.name = kb.observable(model, 'name');
        this.location = kb.observable(model, 'location');
    };

    /*var EmployeeViewModel = function(model){
        this.name = kb.observable(model, 'name');
        this.Department = kb.observable(model, 'department');  // <- TODO fix this line??
    };*/
    var EmployeeViewModel = kb.ViewModel.extend({
        constructor: function(model, options) {
            var _this = this;
            kb.ViewModel.prototype.constructor.call(this, model, {
                requires: ['name', 'department'],
                factories: {
                    'department': DepartmentViewModel
                },
                options: options
            });
        }
    });

    // The App

    window.AppViewModel = function(model) {
        var _this = this;

        this.collections = {
            departments: new DepartmentCollection([
                {name: 'Marketing', location: 'Floor 1'},
                {name: 'Research', location: 'Basement'}
            ]),
            employees: new EmployeeCollection([
                {name: 'John', department: departments[1]},
                {name: 'Jane', department: departments[0]}
            ])
        };

        this.departments = kb.collectionObservable(this.collections.departments, {
            view_model: DepartmentViewModel
        });

        this.employees = kb.collectionObservable(this.collections.employees, {
            factories: {
                'models': EmployeeViewModel,
                'models.department.models': DepartmentViewModel
            }
        });

        this.addDepartment = function(){
            _this.collections.departments.create({});
        };

        this.addEmployee = function(){
            _this.collections.employees.create({});
        };

    };

}).call(this);//]]>
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Sample</title>
	<link rel="stylesheet" href="base.css">

	</head>
	<body>
	<section id="app" kb-inject="AppViewModel">

	<section id="departments">
	<h2>Departments</h2>
	<ul data-bind="foreach: departments">
	<li>
	<input data-bind="value: name"/>
	<input data-bind="value: location"/>
	</li>
	</ul>
	<button data-bind="click: addDepartment">Add Department</button>
	</section>

	<section id="employees">
	<h2>Employees</h2>
	<ul data-bind="foreach: employees">
	<li>
	<input data-bind="value: name"/>
	<span data-bind="text: department().name"></span>
	<select data-bind="options: $root.departments().name, optionsText: department"></select>
	</li>
	</ul>
	<button data-bind="click: addEmployee">Add Employee</button>
	</section>

	</section>

	<!-- App Dependencies -->
	<script type="text/javascript" src="zepto.js"></script>
	<script type="text/javascript" src="knockback-full-stack.min.js"></script>
	<script type="text/javascript" src="backbone-relational.js"></script>

	<!-- App and Components -->
	<script type="text/javascript">//<![CDATA[
	(function() {

	// Model Defs using Backbone-relational

	var Department = Backbone.RelationalModel.extend({
	// Keys: name, location
	});

	var DepartmentCollection = Backbone.Collection.extend({
	model: Department
	});

	var Employee = Backbone.RelationalModel.extend({
	// Keys: name, department
	relations: [{
	type: Backbone.HasOne,
	key: 'department',
	relatedModel: Department,
	collectionType: DepartmentCollection
	// we don't need a reserve relation here
	}]
	});

	var EmployeeCollection = Backbone.Collection.extend({
	model: Employee
	});

	// ViewModels using Knockback

	var DepartmentViewModel = function(model){
	this.name = kb.observable(model, 'name');
	this.location = kb.observable(model, 'location');
	};

	/*var EmployeeViewModel = function(model){
	this.name = kb.observable(model, 'name');
	this.Department = kb.observable(model, 'department'); // <- TODO fix this line??
	};*/
	var EmployeeViewModel = kb.ViewModel.extend({
	constructor: function(model, options) {
	var _this = this;
	kb.ViewModel.prototype.constructor.call(this, model, {
	requires: ['name', 'department'],
	factories: {
	'department': DepartmentViewModel
	},
	options: options
	});
	}
	});

	// The App

	window.AppViewModel = function(model) {
	var _this = this;

	this.collections = {
	departments: new DepartmentCollection([
	{name: 'Marketing', location: 'Floor 1'},
	{name: 'Research', location: 'Basement'}
	]),
	employees: new EmployeeCollection([
	{name: 'John', department: departments[1]},
	{name: 'Jane', department: departments[0]}
	])
	};

	this.departments = kb.collectionObservable(this.collections.departments, {
	view_model: DepartmentViewModel
	});

	this.employees = kb.collectionObservable(this.collections.employees, {
	factories: {
	'models': EmployeeViewModel,
	'models.department.models': DepartmentViewModel
	}
	});

	this.addDepartment = function(){
	_this.collections.departments.create({});
	};

	this.addEmployee = function(){
	_this.collections.employees.create({});
	};

	};

	}).call(this);//]]>
	</script>

	</body>
	</html>