1 /* This is a demo of using xoslib with Marionette
3 The main window is split into two halves. The left half has a CollectionView
4 (SliceListView) that lists all slices the user has access to. The right half
5 has an ItemView (SliceDetailView) that allows the user to edit the
6 name and description of a slice, as well as a <Save> button to save it.
9 SliceEditorApp = new Marionette.Application();
11 SliceEditorApp.addRegions({
12 sliceList: "#sliceEditorList",
13 sliceDetail: "#sliceEditorDetail",
16 /* SliceListItemView: This is the item view that is used by SliceListView to
20 SliceEditorApp.SliceListItemView = Marionette.ItemView.extend({
21 template: "#sliceeditor-listitem-template",
\r
23 className: 'sliceeditor-listitem',
\r
25 events: {"click": "changeSlice"},
\r
27 changeSlice: function(e) {
\r
29 e.stopPropagation();
\r
31 if (SliceEditorApp.sliceDetail.currentView && SliceEditorApp.sliceDetail.currentView.dirty) {
\r
32 if (!confirm("discard current changes?")) {
\r
37 /* create a new SliceDetailView and set the sliceDetail region to
\r
41 var sliceDetailView = new SliceEditorApp.SliceDetailView({
\r
44 SliceEditorApp.sliceDetail.show(sliceDetailView);
\r
48 /* SliceListView: This displays a list of slice names.
\r
51 SliceEditorApp.SliceListView = Marionette.CollectionView.extend({
53 childView: SliceEditorApp.SliceListItemView,
\r
55 initialize: function() {
\r
56 /* CollectionViews don't automatically listen for change events, but we
\r
57 want to, so we pick up changes from the DetailView, and we pick up
\r
58 changes from the server.
\r
60 this.listenTo(this.collection, 'change', this._renderChildren);
\r
63 attachHtml: function(compositeView, childView, index) {
\r
64 // The REST API will let admin users see everything. For the developer
\r
65 // view we still want to hide slices we are not members of.
\r
66 if (childView.model.get("sliceInfo").roles.length == 0) {
\r
69 SliceEditorApp.SliceListView.__super__.attachHtml(compositeView, childView, index);
\r
73 /* SliceDetailView: Display the slice and allow it to be edited */
\r
75 SliceEditorApp.SliceDetailView = Marionette.ItemView.extend({
\r
76 template: "#sliceeditor-sliceedit-template",
\r
79 events: {"click button.js-submit": "submitClicked",
\r
80 "change input": "inputChanged"},
\r
82 /* inputChanged is watching the onChange events of the input controls. We
\r
83 do this to track when this view is 'dirty', so we can throw up a warning
\r
84 if the user tries to change his slices without saving first.
\r
87 inputChanged: function(e) {
\r
91 submitClicked: function(e) {
\r
93 var data = Backbone.Syphon.serialize(this);
\r
94 this.model.save(data);
\r
99 SliceEditorApp.on("start", function() {
100 var sliceListView = new SliceEditorApp.SliceListView({
101 collection: xos.slicesPlus
\r
103 SliceEditorApp.sliceList.show(sliceListView);
\r
104 xos.slicesPlus.startPolling();
\r
107 $(document).ready(function(){
108 SliceEditorApp.start();