remove newlines and add comments
diff --git a/planetstack/core/xoslib/static/js/sliceEditor.js b/planetstack/core/xoslib/static/js/sliceEditor.js
index 06575ae..c629944 100644
--- a/planetstack/core/xoslib/static/js/sliceEditor.js
+++ b/planetstack/core/xoslib/static/js/sliceEditor.js
@@ -1,10 +1,22 @@
+/* This is a demo of using xoslib with Marionette
+
+ The main window is split into two halves. The left half has a CollectionView
+ (SliceListView) that lists all slices the user has access to. The right half
+ has an ItemView (SliceDetailView) that allows the user to edit the
+ name and description of a slice, as well as a <Save> button to save it.
+*/
+
SliceEditorApp = new Marionette.Application();
-
-SliceEditorApp.addRegions({
- sliceList: "#sliceEditorList",
- sliceDetail: "#sliceEditorDetail",
+
+SliceEditorApp.addRegions({
+ sliceList: "#sliceEditorList",
+ sliceDetail: "#sliceEditorDetail",
});
+/* SliceListItemView: This is the item view that is used by SliceListView to
+ display slice names.
+*/
+
SliceEditorApp.SliceListItemView = Marionette.ItemView.extend({
template: "#sliceeditor-listitem-template",
tagName: 'li',
@@ -22,21 +34,29 @@
}
}
+ /* create a new SliceDetailView and set the sliceDetail region to
+ display it.
+ */
+
var sliceDetailView = new SliceEditorApp.SliceDetailView({
model: this.model,
});
SliceEditorApp.sliceDetail.show(sliceDetailView);
},
});
+
+/* SliceListView: This displays a list of slice names.
+*/
SliceEditorApp.SliceListView = Marionette.CollectionView.extend({
tagName: "ul",
childView: SliceEditorApp.SliceListItemView,
- modelEvents: {"sync": "render"},
-
initialize: function() {
- this.dirty = false;
+ /* CollectionViews don't automatically listen for change events, but we
+ want to, so we pick up changes from the DetailView, and we pick up
+ changes from the server.
+ */
this.listenTo(this.collection, 'change', this._renderChildren);
},
@@ -50,6 +70,8 @@
},
});
+/* SliceDetailView: Display the slice and allow it to be edited */
+
SliceEditorApp.SliceDetailView = Marionette.ItemView.extend({
template: "#sliceeditor-sliceedit-template",
tagName: 'div',
@@ -57,6 +79,11 @@
events: {"click button.js-submit": "submitClicked",
"change input": "inputChanged"},
+ /* inputChanged is watching the onChange events of the input controls. We
+ do this to track when this view is 'dirty', so we can throw up a warning
+ if the user tries to change his slices without saving first.
+ */
+
inputChanged: function(e) {
this.dirty = true;
},