core.js

Superduper = SC.Application.create(
  /** @scope Superduper.prototype */ {

  NAMESPACE: 'Superduper',
  VERSION: '0.1.0',

  // This is your application store.  You will use this store to access all
  // of your model data.  You can also set a data source on this store to
  // connect to a backend server.  The default setup below connects the store
  // to any fixtures you define.
  
  //Use This Line To Use Fixtures
  //store: SC.Store.create().from(SC.Record.fixtures)
  
  //Uncomment These Three Lines To Use DataSource From Couchdb
  store: SC.Store.create({ 
  commitRecordsAutomatically: YES
  }).from('Superduper.ProductDataSource')
  
  // TODO: Add global constants or singleton objects needed by your app here.

}) ;

CouchDB JSON Returned

{"total_rows":2,"offset":0,"rows":[
{"id":"1","key":"14-NB","value":{"id":"1","partNumber":"1234-567","description":"Line 1, Line2","brand":"3M","stockNumber":"14-NB"}},
{"id":"2","key":"999-9999","value":{"id":"2","partNumber":"13-NB","description":"Description Line 1, Line 2","brand":"3M","stockNumber":"999-9999"}}
]}

main.js

Superduper.main = function main() {

  // Step 1: Instantiate Your Views
  // The default code here will make the mainPane for your application visible
  // on screen.  If you app gets any level of complexity, you will probably 
  // create multiple pages and panes.  
  Superduper.getPath('mainPage.mainPane').append() ;

  // Step 2. Set the content property on your primary controller.
  // This will make your app come alive!

  // TODO: Set the content property on your primary controller
  // ex: Superduper.contactsController.set('content',Superduper.contacts);
  
  //Use This Variable When Connected To Server
  var product = Superduper.store.find(Superduper.PRODUCT_QUERY);
  
  //var product = Superduper.store.find(Superduper.Product);
  Superduper.productController.set('content', product);

} ;

function main() { Superduper.main(); }

main_page.js

Superduper.mainPage = SC.Page.design({

    mainPane: SC.MainPane.design({
	backgroundColor: '#fff',
    childViews: 'navSidebar topView mainView bottomView'.w(),

    topView: SC.ToolbarView.design({
      layout: { top: 0, left: 0, right: 0, height: 35 },
	  backgroundColor: '#fff',
	  borderStyle: SC.BORDER_NONE,
	  classNames: "header".w(),
	  childViews: 'labelView'.w(),
      anchorLocation: SC.ANCHOR_TOP,
	  
	  labelView: SC.LabelView.design({
        layout: { centerY: 0, centerX: 0, right: 10, height: 20 },
        controlSize: SC.SMALL_CONTROL_SIZE,
		textAlign: SC.ALIGN_RIGHT,
        fontWeight: SC.BOLD_WEIGHT,
        value:   'Welcome Back, James Hayton | Logout'
      })
    }),

	navSidebar: SC.View.design({
      hasHorizontalScroller: NO,
	  borderStyle: SC.BORDER_NONE,
      layout: { top: 35, bottom: 35, left: 0, right: 0, width: 250 },
	  //backgroundColor: '#A2BFCE',
	  backgroundColor: '#555',
	  classNames: "sidebar sidebar-left".w(),
      childViews: "searchBoxContainer navView".w(),
	  
	  searchBoxContainer: SC.View.design({
        layout: { height: 26 },
		borderStyle: SC.BORDER_NONE,
		hasHorizontalScroller: NO,
		classNames: "search-box".w(),
		childViews: "searchBox".w(),
		searchBox: SC.TextFieldView.design({
          layout: { height: 20, top: 3, left: 8, right: 35 },
		  hint: "Search...",
		  borderStyle: SC.BORDER_NONE
        })
      }),
	  
	  navView: SC.ScrollView.design({
        hasHorizontalScroller: NO,
	    borderStyle: SC.BORDER_NONE,
        layout: { top: 26, left: 0, width: 250 }
      })
    }),
	
	mainView: SC.SplitView.design({
      layout: { top: 35, bottom: 35, left: 250, right: 0 },
	  borderStyle: SC.BORDER_NONE,
	  dividerThickness: 5,
	  defaultThickness: .3,
	  autoresizeBehavior: SC.RESIZE_TOP_LEFT,
	  topLeftMinThickness: 500,
	  bottomRightMinThickness: 350,
	  //bottomRightMaxThickness: 550,
      backgroundColor: '#f2f2f2',
	  topLeftView: SC.View.design({
	    canCollapse: NO, 
		borderStyle: SC.BORDER_NONE,
        childViews: "productList".w(),
		productList: SC.ScrollView.design({
		  layout: { left:0, right:0, top: 0, bottom:0 },
		  hasHorizontalScroller: NO,
		  borderStyle: SC.BORDER_NONE,
		  contentView: SC.ListView.design({
		    contentBinding: "Superduper.productController.arrangedObjects",
		    selectionBinding: "Superduper.productController.selection",
			contentValueKey: "key",
			canEditContent: YES,
			rowHeight:24
		  })
		}) // scroll view
	  }),
	  bottomRightView: SC.View.design({
		backgroundColor: '#f2f2f2',  
		classNames: "sidebar".w(),
		//canCollapse: NO,
		borderStyle: SC.BORDER_NONE,
		childViews: "noProductView addButton".w(),
		noProductView: SC.LabelView.design({
	      layout: { centerX: 0, centerY: 0, height: 18, width: 200 },
		  borderStyle: SC.BORDER_NONE,
		  textAlign: SC.ALIGN_CENTER,
		  value: "No Product Selected"
		}),
		addButton: SC.ButtonView.design({
        layout: { centerX: 0, height: 24, top: 25, width: 100 },
		target: "Superduper.productController",
        action: "addProduct",
        title:  "Add Product"
        })
	  })

    }),

    bottomView: SC.ToolbarView.design({
      layout: { bottom: 0, left: 0, right: 0, height: 35 },
	  borderStyle: SC.BORDER_NONE,
	  classNames: "footer".w(),
	  //childViews: 'summaryView'.w(),
      anchorLocation: SC.ANCHOR_BOTTOM
    })
  })
});

product.js Controller

Superduper.productController = SC.ArrayController.create(
/** @scope Superduper.productController.prototype */ {

    addProduct: function() {
    var product;
	
    // create a new task in the store
    product = Superduper.store.createRecord(Superduper.Product, {
      "description": "New Product"
    });

    // select new task in UI
    this.selectObject(product);

    // activate inline editor once UI can repaint
    this.invokeLater(function() {
      var contentIndex = this.indexOf(product);
      var list = Superduper.mainPage.getPath('mainPane.mainView.topLeftView.productList.contentView');
      var listItem = list.itemViewForContentIndex(contentIndex);
      listItem.beginEditing();
    });
	
    return YES;
  }

}) ;

product.js Data Source

  sc_require('models/product');
  
  Superduper.PRODUCT_QUERY = SC.Query.local(Superduper.Product, {
  orderBy: 'description'
  });


Superduper.ProductDataSource = SC.DataSource.extend(
/** @scope Superduper.ProductDataSource.prototype */ {

  // ..........................................................
  // QUERY SUPPORT
  // 
  
  

  fetch: function(store, query) {

  if (query === Superduper.PRODUCT_QUERY) {
    SC.Request.getUrl('/products').json()
	  .header('Accept', 'application/json')
      .notify(this, 'didFetchProducts', store, query)
      .send();
    return YES;
  }
  return NO;
  },

  didFetchProducts: function(response, store, query) {

  if (SC.ok(response)) {
    store.loadRecords(Superduper.Product, response.get('body').content);
    store.dataSourceDidFetchQuery(query);
  } else store.dataSourceDidErrorQuery(query, response);
  },

  // ..........................................................
  // RECORD SUPPORT
  // 
  
  retrieveRecord: function(store, storeKey) {
    
    // TODO: Add handlers to retrieve an individual record's contents
    // call store.dataSourceDidComplete(storeKey) when done.
    
    return NO ; // return YES if you handled the storeKey
  },
  
  createRecord: function(store, storeKey) {
    
    // TODO: Add handlers to submit new records to the data source.
    // call store.dataSourceDidComplete(storeKey) when done.
    
    return NO ; // return YES if you handled the storeKey
  },
  
  updateRecord: function(store, storeKey) {
    
    // TODO: Add handlers to submit modified record to the data source
    // call store.dataSourceDidComplete(storeKey) when done.

    return NO ; // return YES if you handled the storeKey
  },
  
  destroyRecord: function(store, storeKey) {
    
    // TODO: Add handlers to destroy records on the data source.
    // call store.dataSourceDidDestroy(storeKey) when done
    
    return NO ; // return YES if you handled the storeKey
  }
  
}) ;

product.js Model

Superduper.Product = SC.Record.extend(
/** @scope Superduper.Product.prototype */ {

   primaryKey: "id",
   stockNumber: SC.Record.attr(String),
   description: SC.Record.attr(String),
   productStatus: SC.Record.attr(String),
   brand: SC.Record.attr(String),
   partNumber: SC.Record.attr(String)

}) ;