Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
sgentile committed Dec 15, 2011
1 parent 85dd14c commit 43a65fe
Show file tree
Hide file tree
Showing 6 changed files with 222 additions and 19 deletions.
1 change: 1 addition & 0 deletions Contacts/Contacts.csproj
Expand Up @@ -106,6 +106,7 @@
<Content Include="Scripts\backbone-localstorage.js" />
<Content Include="Scripts\backbone-mvc-sync.js" />
<Content Include="Scripts\backbone.js" />
<Content Include="Scripts\backbone.marionette.js" />
<Content Include="Scripts\backbone.min.js" />
<Content Include="Scripts\backbone.modelbinding.js" />
<Content Include="Scripts\jquery-1.6.4-vsdoc.js" />
Expand Down
71 changes: 55 additions & 16 deletions Contacts/Scripts/app.js
Expand Up @@ -4,6 +4,29 @@
/// <reference path="backbone.js" />
/// <reference path="backbone-localstorage.js" />
/// <reference path="backbone-mvc-sync.js" />

var AppView = function () {
this.currentView = null;
};
AppView.prototype.showView = function (view) {
if (this.currentView) {
this.currentView.close();
}

this.currentView = view;
this.currentView.render();
};

Backbone.View.prototype.close = function() {
//this.remove();
//this.unbind();
if (this.onClose) {
this.onClose();
}
};



$(function () {

Contact = ModelBase.extend({
Expand All @@ -29,7 +52,7 @@ $(function () {
render: function () {
var content = this.template.tmpl();
$(this.el).html(content);

//Backbone.ModelBinding.bind(this);
return this;
},
events: {
Expand All @@ -39,8 +62,11 @@ $(function () {
addContact: function (event) {
var model = new Contact({ firstname: $("#firstname").val(), lastname: $("#lastname").val() });
contacts.create(model);
this.$("firstname").val("");
this.$("lastname").val("");
//this.$("firstname").val("");
//this.$("lastname").val("");
},
onClose: function () {
//Backbone.ModelBinding.unbind(this);
}
});

Expand All @@ -59,20 +85,24 @@ $(function () {
var content = this.template.tmpl(this.model.toJSON());
//take the rendered HTML and pop it into the DOM
$(this.el).html(content);

Backbone.ModelBinding.bind(this);
return this;
},
save: function () {
var firstName = $("#editfirstname").val();
var lastName = $("#editlastname").val();
this.model.set({ firstname: firstName, lastname: lastName });

console.log(JSON.stringify(this.model));
alert('check log');
// var firstName = $("#editfirstname").val();
// var lastName = $("#editlastname").val();
// this.model.set({ firstname: firstName, lastname: lastName });
this.model.save();
app.navigate("", true);
// app.navigate("", true);
},
cancel: function () {
app.navigate("", true);
//defaultView.render();
return false;
},
onClose: function () {
Backbone.ModelBinding.unbind(this);
}
});

Expand Down Expand Up @@ -132,27 +162,36 @@ $(function () {
});



AppRouter = Backbone.Router.extend({
initialize: function () {
defaultView = new DefaultView();
appView = new AppView();
contactListView = new ContactListView({ collection: contacts });

defaultView = new DefaultView();
editContactView = new EditContactView();
},
showAdd: function () {
appView.showView(defaultView);
},
showEdit: function (id) {
var contact = contacts.get(id);
editContactView.model = contact;
appView.showView(editContactView);
},
routes: {
"": "defaultRoute", // matches http://example.com/#anything-here
"contact/edit/:id": "editContact"
},
defaultRoute: function () {
defaultView.render();
this.showAdd();
},
editContact: function (id) {
var model = contacts.get(id);
editContactView = new EditContactView({ model: model });
editContactView.render();
this.showEdit(id);
}
});



// Initiate the router
var app = new AppRouter();
// Start Backbone history a neccesary step for bookmarkable URL's
Expand Down
163 changes: 163 additions & 0 deletions Contacts/Scripts/backbone.marionette.js
@@ -0,0 +1,163 @@
// Backbone.Marionette v0.1.0
//
// Copyright (C)2011 Derick Bailey, Muted Solutions, LLC
// Distributed Under MIT License
//
// Documentation and Full License Available at:
// http://github.com/derickbailey/backbone.marionette

Backbone.Marionette = (function (Backbone, _, $) {
var Marionette = {};

Marionette.version = "0.1.0";

// Region Manager
// --------------

// Manage the visual regions of your composite application. See
// http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/
Marionette.RegionManager = function (options) {
this.options = options || (options = {});
if (!this.el) {
throw new Error("An 'el' must be specified");
}
this.el = $(this.el);
};

_.extend(Marionette.RegionManager.prototype, Backbone.Events, {

// Displays a backbone view instance inside of the region.
// Handles calling the `render` method for you. Reads content
// directly from the `el` attribute. Also calls an optional
// `onShow` and `close` method on your view, just after showing
// or just before closing the view, respectively.
show: function (view) {
var oldView = this.currentView;
this.currentView = view;

this._closeView(oldView);
this._openView(view);
},

_closeView: function (view) {
if (view && view.close) {
view.close();
}
},

_openView: function (view) {
view.render();
this.el.html(view.el);
if (view.onShow) {
view.onShow();
}
}
});

// Composite Application
// ---------------------

// Contain and manage the composite application as a whole.
// Stores and starts up `RegionManager` objects, includes an
// event aggregator as `app.vent`
Marionette.Application = function (options) {
this.initializers = [];
this.vent = _.extend({}, Backbone.Events);
_.extend(this, options);
};

_.extend(Marionette.Application.prototype, Backbone.Events, {
addInitializer: function (initializer) {
this.initializers.push(initializer);
},

// kick off all of the application's processes.
// initializes all of the regions that have been added
// to the app, and runs all of the initializer functions
start: function (options) {
this.trigger("initialize:before", options);
for (var i = 0; i < this.initializers.length; i++) {
var initializer = this.initializers[i];
initializer(options);
}
this.trigger("initialize:after", options);
},

// Add region managers to your app.
// Accepts a hash of named strings or RegionManager objects
// addRegions({something: "#someRegion"})
// addRegions{{something: RegionManager.extend({el: "#someRegion"}) });
addRegions: function (regions) {
if (!this.regions) {
this.regions = {};
this.addInitializer(_.bind(this._initializeRegions, this));
}

var appRegions = this.regions;

for (var region in regions) {
if (regions.hasOwnProperty(region)) {
regionValue = regions[region];

if (typeof regionValue === "string") {
appRegions[region] = Marionette.RegionManager.extend({
el: regionValue
});
} else {
appRegions[region] = regionValue
}

}
}
},

_initializeRegions: function () {
if (!this.regions) {
return;
}

for (var region in this.regions) {
if (this.regions.hasOwnProperty(region)) {
this[region] = new this.regions[region]();
}
}
}
});

// Helpers
// -------

// The 'inherits' and 'extend' functions are taken directly from:
// Backbone.js 0.5.3
// (c) 2010 Jeremy Ashkenas, DocumentCloud Inc.
// http://documentcloud.github.com/backbone

var extend = function (protoProps, classProps) {
var child = inherits(this, protoProps, classProps);
child.extend = this.extend;
return child;
};

var ctor = function () { };
var inherits = function (parent, protoProps, staticProps) {
var child;
if (protoProps && protoProps.hasOwnProperty('constructor')) {
child = protoProps.constructor;
} else {
child = function () { return parent.apply(this, arguments); };
}
_.extend(child, parent);
ctor.prototype = parent.prototype;
child.prototype = new ctor();
if (protoProps) _.extend(child.prototype, protoProps);
if (staticProps) _.extend(child, staticProps);
child.prototype.constructor = child;
child.__super__ = parent.prototype;
return child;
};

Marionette.RegionManager.extend = extend;
Marionette.Application.extend = extend;

return Marionette;
})(Backbone, _, jQuery);
5 changes: 2 additions & 3 deletions Contacts/Views/Home/Index.cshtml
Expand Up @@ -18,7 +18,6 @@
<div id="contacts_container">

<ul id="contacts-list"></ul>
<p>(double click on name to edit a contact)</p>
</div>
<div id="app_container"></div>

Expand All @@ -38,8 +37,8 @@
<script type="text/template" id="edit_template">
<fieldset>
<legend>Edit Contact</legend>
<label for="firstname">First Name:</label><input type="text" id="editfirstname" value="${firstname}" /><br/>
<label for="lastname">Last Name:</label><input type="text" id="editlastname" value="${lastname}" /><br/>
First Name: <input type="text" data-bind="value firstname" /><br/>
Last Name: <input type="text" data-bind="value lastname" /><br/>
<input type="button" id="saveContact_button" value="Save" />
<input type="button" id="cancelContact_button" value="Cancel" />
</fieldset>
Expand Down
1 change: 1 addition & 0 deletions Contacts/Views/Shared/_Layout.cshtml
Expand Up @@ -11,6 +11,7 @@
<script src="@Url.Content("~/Scripts/underscore.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/backbone.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/backbone-mvc-sync.js ")" type="text/javascript"></script>
@*<script src="@Url.Content("~/Scripts/backbone.marionette.js ")" type="text/javascript"></script> *@
<!-- use below to use localstorage - session storage -->
@*<script src="@Url.Content("~/Scripts/backbone-amplifySessionStorage.js")" type="text/javascript"></script> *@

Expand Down
Binary file modified Contacts/obj/Debug/DesignTimeResolveAssemblyReferencesInput.cache
Binary file not shown.

0 comments on commit 43a65fe

Please sign in to comment.