BBCloneMail fork

gistfile1.js

//this is using your latest marionette version v0.4.3

BBAdmin.MailApp = (function(BBAdmin, Backbone){
  var MailApp = {};

  // Email Model And Collection
  // --------------------------

  MailApp.Group = Backbone.Model.extend({});

  MailApp.GroupCollection = Backbone.Collection.extend({
    model: MailApp.Group,
	
	//WCF WEBAPI call - returns json same as options.managers
	url: "/WesleyForms/lookups/managementgroups",
	
	initialize:function(){
		console.log("initalize GroupCollection");		
	},

        // due to the "options.managers" json data being returned, 
        // you have to provide a parse method to get the data you need.
        // Backbone expects the json to be [{..}, {...}, {...}] directly, 
        // not hanging off another attribute

        parse: function(json){
          // if this comes back as {managers: [{...}, {...}]}
          return json.managers;

          // or if this comes back as {options: {managers: [...]}}
          // return json.options.managers;
        },
	
	
    //Same as your sample code, except addition of logs. checking that the data isn't being filtered
    forCategory: function(category){

		console.log("forCategory");	
		
		if (!category){ 
			console.log("Not Filtered");
			"Not Filtered"
			return this; 
		}		

		var filteredMailItems = this.filter(function(email){
			console.log("Filtered");
			var categories = email.get("categories");
			var found = categories.indexOf(category) >= 0;
		return found;
		});

		console.log("Return Filtered Items");
		return new MailApp.GroupCollection(filteredMailItems);
		
    }
	
  });

  // Mail App Helper Methods
  // -----------------------

  // Filter the mail by the category, if one was specified
  var showFilteredEmailList = function(category){    
	console.log("showFilteredEmailList");
			
	var filteredMail = MailApp.groupList.forCategory();		
	
	console.log("Contents of filteredMail");
	console.log(filteredMail);
	
    MailApp.MailBox.showMail(filteredMail);
	
  }

  // Mail App Public API
  // -------------------
  
  MailApp.showInbox = function(){	
    MailApp.showCategory();
    BBAdmin.vent.trigger("mail:show");
  };

  
  MailApp.showCategory = function(category){
    //showFilteredEmailList();
    MailApp.Categories.showCategoryList();
  };

  //NOT USED
  MailApp.showMessage = function(messageId){
    var email = MailApp.groupList.get(messageId);
    MailApp.MailBox.showMessage(email);
    MailApp.Categories.showCategoryList();
  };

  // Mail App Event Handlers
  // -----------------------

  
  BBAdmin.vent.bind("mail:category:show", function(category){
	//Not worried about this case
    //showFilteredEmailList(category);
  });

  // When the mail app is shown or `inbox` is clicked,
  // show all the mail.
  BBAdmin.vent.bind("mail:show", function(){
    showFilteredEmailList();
  });

  
  
  
  
  // Mail App Initializer
  // --------------------

  // Initializes the email collection object with the list
  // of emails that are passed in from the call to 
  // `BBAdmin.start`.
  BBAdmin.addInitializer(function(options){
	console.log("GroupApp Initialiser - Begin");
	//Works with this json from the index.html page
	/*
	options.managers=
	[{
		"id" : "d8bb926f-7921-4f96-b04c-2ba5dd7d451e",
		"name" : "General Managers"
	}, {
		"id" : "14105e4d-34e3-418e-a113-3ac7ef374f4f",
		"name" : "Group Managers"
	}, {
		"id" : "c0adf5da-5aa9-4349-9aec-4d5a6efcd9e4",
		"name" : "Operation Managers"
	}, {
		"id" : "b5b9e682-6c9a-4a4b-bf40-280216af1795",
		"name" : "Superintendent"
	}, {
		"id" : "bb7a6368-5a2d-412c-8f78-50d8a1c7af63",
		"name" : "Supervisors"
	}
	*/
	//And this call with that hardcoded json
	//MailApp.groupList = new MailApp.GroupCollection(options.managers);

	
	
	
	//Assumed that this would be a good place for this	
	MailApp.groupList = new MailApp.GroupCollection();
	MailApp.groupList.fetch();
	
	console.log("GroupApp Initialiser - End");
  });
  
  return MailApp;
})(BBAdmin, Backbone);

//EOF


// The Mailbox is a sub-app of the Mail App. It controls the 
// display of the mail list and the individual emails.
BBAdmin.MailApp.MailBox = (function(BBAdmin, Backbone, $){
  var MailBox = {};

  // Mail Box Views
  // --------------
  
  // The the full contents of the email.
  var EmailView = BBAdmin.ItemView.extend({
    tagName: "ul",
    className: "email-list email-view",
    template: "#email-view-template",

    onRender: function(){
      $(this.el).hide();
    },

    onShow: function(){
      $(this.el).slideDown("fast");
    }
  });

  // Show a preview of the email in the list. Clicking
  // on it will show the full contents of the email.
  var EmailPreview = BBAdmin.ItemView.extend({
    tagName: "li",
    template: "#email-preview-template",

	initialize: function(){
    console.log("email-preview-template INITIALISED")
	},
	
	onRender: function(){
      console.log("email-preview-template RENDERED")
    },
	
    events: {
      "click": "showEmail"
    },

    showEmail: function(e){
      BBAdmin.vent.trigger("mail:message:show", this.model);
    }
  });

  // The actual mail box view, which renders each
  // of the individual email items. 
  var EmailListView = BBAdmin.CollectionView.extend({
    tagName: "ul",
    className: "email-list",
    itemView: EmailPreview,
	
	 onRender: function(){
      console.log("email-list RENDERED");	  
    },
	
  });

  // A method to display a list of supplied email messages.
  MailBox.showMail = function(emailList){	
	console.log("MailBox.showMail");
	
	var emailListView = new EmailListView({
      collection: emailList	  
    });
	
	console.log("contents of emailListView");
	console.log(emailListView);
	
    BBAdmin.mainRegion.show(emailListView);
  }

  // Mail Box Event Handlers
  // -----------------------

  // Handle the selection of an email message by displaying
  // it in the main area of the application.
  BBAdmin.vent.bind("mail:message:show", function(message){
    MailBox.showMessage(message);
  });

  return MailBox;
})(BBAdmin, Backbone, jQuery);


//Console.log output
/*
bbadmin.groupapp.js:108 GroupApp Initialiser - Begin
bbadmin.groupapp.js:16 initalize GroupCollection
bbadmin.groupapp.js:139 GroupApp Initialiser - End
bbadmin.groupapp.js:50 showFilteredEmailList
bbadmin.groupapp.js:23 forCategory
bbadmin.groupapp.js:26 Not Filtered
bbadmin.groupapp.js:54 Contents of filteredMail
bbadmin.groupapp.js:55 child //SHOWS 5 results
bbadmin.groupapp.mailbox.js:75 MailBox.showMail
bbadmin.groupapp.mailbox.js:81 contents of emailListView
bbadmin.groupapp.mailbox.js:82 child //OuterHtml = "<ul class="email-list"></ul>"
bbadmin.groupapp.mailbox.js:68 email-list RENDERED

//Doesn't ever show email-preview-template rendering at all
//With hard coded JSON this is what i get
x5  -bbadmin.groupapp.mailbox.js:44 email-preview-template INITIALISED
x1 - bbadmin.groupapp.mailbox.js:68 email-list RENDERED
x5 - bbadmin.groupapp.mailbox.js:48 email-preview-template RENDERED
*/

this is my raw response inside chrome. from the MailApp.GroupCollection fetch()

[{"id":"d8bb926f-7921-4f96-b04c-2ba5dd7d451e","name":"General Managers"},{"id":"14105e4d-34e3-418e-a113-3ac7ef374f4f","name":"Group Managers"},{"id":"c0adf5da-5aa9-4349-9aec-4d5a6efcd9e4","name":"Operation Managers"},{"id":"b5b9e682-6c9a-4a4b-bf40-280216af1795","name":"Superintendent"},{"id":"bb7a6368-5a2d-412c-8f78-50d8a1c7af63","name":"Supervisors"}]

from inside mailapp initialiser

MailApp.groupList = new MailApp.GroupCollection();
MailApp.groupList.fetch();
console.log(MailApp.groupList);

length = 0;

with the hardcoded json length =5;

that code will never return a count correctly because .fetch() is asynchronous

try this

MailApp.groupList = new MailApp.GroupCollection();
MailApp.groupList.fetch({
  success: function(){
    console.log(MailApp.groupList);
  }
});