I have the regEvent outputting it's model (bootstrapped) to the view.
I have the regClass outputting it's model (bootstrapped) to it's view.
I'm working on getting the Accounts to save to localStorage and keep one
unique id for it's collection.
app.Accounts = Backbone.Collection.extend({
model: app.Account,
- //localStorage: new Backbone.LocalStorage('RegistrantList')
+ localStorage: new Backbone.LocalStorage( 'Accounts_' + this.id ),
+
+ // create: function( item ) {
+ // console.log( item );
+ // localStorage.setItem(
+ // 'Account_' + item.colName,
+ // JSON.stringify( item )
+ // );
+ // return item.save();
+ // },
+
});
+++ /dev/null
-// Event Reg List collection
-var EventRegList = Backbone.Collection.extend({
- model: EventReg
-});
app.RegClasses = Backbone.Collection.extend({
model: app.RegClass,
-
});
+++ /dev/null
-// eventRegApp.js
-var app = app || {};
-
-app.EventRegistrants = new app.Accounts();
-
-jQuery(document).ready(function($){
-
- new app.AppView();
-
-});
-// js/models/eventRegistrant.js
+// js/models/account.js
var app = app || {};
+++ /dev/null
-// js/models/classes.js
-var app = app || {};
-
-// Model to hold the collection of accounts for each RegClass
-app.Classes = Backbone.Model.extend({
-
- initialize: function(){
- this.accounts = new app.Accounts;
-
- localStorage: new Backbone.LocalStorage( 'Accounts_' + this.id );
- }
-
-});
},
initialize: function(){
- // for regRates
+ this.accounts = new app.Accounts;
+
+ //localStorage = new Backbone.LocalStorage( 'Accounts_' + this.name );
},
+
});
// Default regEvent values
defaults: {
- event: 0,
+ name: 'regEvent',
event_name: '',
event_code: '',
notify_email: '',
initialize: function(){
// for setting up classes
+ this.classes = new app.RegClasses;
+ },
+
+ setClasses: function( regClasses ){
+ this.classes.reset( regClasses );
},
});
--- /dev/null
+// js/views/account.js
+var app = app || {};
+
+// Event Registrant View
+app.AccountView = Backbone.View.extend({
+ tagName: 'div',
+
+ className: 'glm-reg-level-registrant clearfix',
+
+ template: _.template( $('#account-template').html() ),
+
+ events: {
+ 'click label': 'edit',
+ 'click .glm-reg-level-registrant-delete': 'deleteOne',
+ 'click .saveRegistrant': 'close',
+ },
+
+ initialize: function(){
+ this.listenTo( this.model, 'change', this.render );
+ this.listenTo( this.model, 'destroy', this.remove );
+ return this;
+ },
+
+ render: function(){
+ this.$el.html( this.template( this.model.toJSON() ) );
+ this.$nameInput = this.$('.editName');
+ this.$emailInput = this.$('.editEmail');
+ return this;
+ },
+
+ deleteOne: function(){
+ this.model.destroy();
+ },
+
+ edit: function(){
+ this.$el.addClass( 'editing' );
+ this.$nameInput.focus();
+ },
+
+ close: function(){
+ var regname = this.$nameInput.val().trim();
+ var regemail = this.$emailInput.val().trim();
+
+ if ( regname && regemail ) {
+ this.model.save({ name: regname, email: regemail });
+ } else {
+ this.clear(); // NEW
+ }
+
+ this.$el.removeClass('editing');
+ },
+
+});
// Event Registrant List View
app.AppView = Backbone.View.extend({
- el: '.glm-reg-level',
+ el: '#regApp',
initialize: function(){
- this.$newName = this.$('.addName');
- this.$newEmail = this.$('.addEmail');
-
- // this.listenTo( app.EventRegistrants, 'add', this.addOne );
- // this.listenTo( app.EventRegistrants, 'reset', this.addAll );
- // app.EventRegistrants.fetch();
+ this.event = new app.RegEventView({ model: app.regEvent });
+ this.render();
},
- deleteOne: function( el ){
- console.log( el );
- console.log( 'deleteOne called on listView' );
+ render: function(){
+ this.$el.append( this.event.render().el );
+ return this;
},
events: {
- 'click .addRegistrant': 'newEntry',
- },
-
- newEntry: function(){
- if ( !this.$newName.val().trim() || !this.$newEmail.val().trim() ) {
- return;
- }
- var emailMatches = app.EventRegistrants.where({email: this.$newEmail.val().trim()});
- app.EventRegistrants.create( this.newAttributes() );
- this.$newName.val('');
- this.$newEmail.val('');
- },
-
- newAttributes: function(){
- return {
- name: this.$newName.val().trim(),
- email: this.$newEmail.val().trim()
- };
- },
-
- addOne: function(item){
- if ( item.isValid() ) {
- var view = new app.AccountView({ model: item });
- this.$el.append( view.render().el );
- }
- },
-
- addAll: function(){
- this.$('.glm-reg-level').html('');
- app.EventRegistrants.each(this.addOne, this);
- },
-
- render: function(){
- var eventRegistrantView = this.collection.map(function(item){
- return (new app.AccountView({ model: item })).render().el;
- });
- this.$el.append(eventRegistrantView);
- return this;
},
});
+++ /dev/null
-// Event List View
-var EventListView = Backbone.View.extend({
-
- el: '#eventapp',
-
- initialize: function(){
- this.collection.bind('add', this.onModelAdded, this);
- this.render();
- },
-
-
- onModelAdded: function(item) {
- var eventView = new eventView({model: item});
- this.$el.append( eventView.render().el);
- },
-
- render: function(){
- var eventView = this.collection.map(function(item){
- return (new EventRegView({model: item})).render().el;
- });
- this.$el.append(eventView);
- return this;
- },
-
-});
+++ /dev/null
-// Event Reg View
-
-var EventRegView = Backbone.View.extend({
-
- tagName: 'div',
-
- className: 'glm-reg-event-item clearfix',
-
- eventRegTpl: _.template( $('#eventReg-template').html() ),
-
- // Called when the view is first created
- initialize: function(){
- this.listenTo(this.model, 'change', this.render);
- },
-
- render: function(){
- this.$el.html( this.eventRegTpl( this.model.toJSON() ) );
- return this;
- },
-
-});
+++ /dev/null
-// Overall **AppView**
-var appView = Backbone.View.extend({
- el: '.glm-reg-level',
-
- initialize: function(){
- this.listenTo();
- },
-});
+++ /dev/null
-// js/views/eventRegistrant.js
-var app = app || {};
-
-// Event Registrant View
-app.AccountView = Backbone.View.extend({
- tagName: 'div',
-
- className: 'glm-reg-level-registrant clearfix',
-
- eventRegistrantTpl: _.template( $('#eventRegistrant-template').html() ),
-
- events: {
- 'click label': 'edit',
- 'click .glm-reg-level-registrant-delete': 'deleteOne',
- 'click .saveRegistrant': 'close',
- },
-
- initialize: function(){
- this.listenTo( this.model, 'change', this.render );
- this.listenTo( this.model, 'destroy', this.remove );
- return this;
- },
-
- render: function(){
- this.$el.html( this.eventRegistrantTpl( this.model.toJSON() ) );
- this.$nameInput = this.$('.editName');
- this.$emailInput = this.$('.editEmail');
- return this;
- },
-
- deleteOne: function(){
- this.model.destroy();
- },
-
- edit: function(){
- this.$el.addClass( 'editing' );
- this.$nameInput.focus();
- },
-
- close: function(){
- var regname = this.$nameInput.val().trim();
- var regemail = this.$emailInput.val().trim();
-
- if ( regname && regemail ) {
- this.model.save({ name: regname, email: regemail });
- } else {
- this.clear(); // NEW
- }
-
- this.$el.removeClass('editing');
- },
-
-});
--- /dev/null
+// js/views/regClass.js
+var app = app || {};
+
+app.RegClassView = Backbone.View.extend({
+ tagName: 'div',
+
+ className: 'glm-reg-level',
+
+ template: _.template( $('#regClass-template').html() ),
+
+ initialize: function(){
+ this.listenTo( this.model.accounts, 'add', this.addOne );
+ this.listenTo( this.model.accounts, 'create', this.addOne );
+ this.listenTo( this.model.accounts, 'reset', this.addAll );
+ return this;
+ },
+
+ events: {
+ 'click .addRegistrant': 'newEntry',
+ },
+
+ newEntry: function(){
+ this.$newName = this.$('.addName');
+ this.$newEmail = this.$('.addEmail');
+
+ if ( !this.$newName.val().trim() || !this.$newEmail.val().trim() ) {
+ return;
+ }
+ // var emailMatches = this.model.accounts.where({email: this.$newEmail.val().trim()});
+ this.model.accounts.create({
+ name: this.$newName.val().trim(),
+ email: this.$newEmail.val().trim()
+ });
+ this.$newName.val('');
+ this.$newEmail.val('');
+ },
+
+ render: function(){
+ this.$el.html( this.template( this.model.toJSON() ) );
+ return this;
+ },
+
+ addOne: function( item ){
+ if ( item.isValid() ) {
+ var view = new app.AccountView({ model: item });
+ this.$el.append( view.render().el );
+ }
+ },
+
+ addAll: function(){
+ this.$('.glm-reg-level').html('');
+ this.model.classes.each( this.addOne, this );
+ },
+
+});
--- /dev/null
+// js/views/regEvent.js
+var app = app || {};
+
+// Reg Event View
+app.RegEventView = Backbone.View.extend({
+
+ tagName: 'div',
+
+ className: 'glm-reg-event-item clearfix',
+
+ template: _.template( $('#regEvent-template').html() ),
+
+ // Called when the view is first created
+ initialize: function(){
+ this.listenTo( this.model, 'change', this.render );
+ },
+
+ render: function(){
+ this.$el.html( this.template( this.model.toJSON() ) );
+ //console.log(app.regEvent.classes);
+ var view = app.regEvent.classes.map(function(item){
+ return (new app.RegClassView({ model: item })).render().el;
+ });
+ this.$el.append(view);
+ return this;
+ },
+
+});
{
$scripts = array(
'backbone-local'=> 'js/lib/backbone.localStorage.min.js',
- 'registrantView'=> 'js/views/eventRegistrant.js',
- 'appView' => 'js/views/app.js',
'account' => 'js/models/account.js',
- 'classes' => 'js/models/classes.js',
'regClass' => 'js/models/regClass.js',
'regEvent' => 'js/models/regEvent.js',
'regRate' => 'js/models/regRate.js',
'accounts' => 'js/collections/accounts.js',
- 'regClasses' => 'js/collections/regClasses.js',
+ 'regClasses' => 'js/collections/regClasses.js',
'regRates' => 'js/collections/regRates.js',
- 'mybackboneapp' => 'js/eventRegApp.js',
+ 'registrantView'=> 'js/views/account.js',
+ 'regEventView' => 'js/views/regEvent.js',
+ 'regClassView' => 'js/views/regClass.js',
+ 'appView' => 'js/views/app.js',
);
foreach ( $scripts as $scriptName => $scriptPath ) {
wp_register_script(
'entry' => $regEventSample,
'thisJsUrl' => GLM_MEMBERS_REGISTRATIONS_PLUGIN_URL . '/js',
'regEventJSON' => json_encode( $regEventSample['reg_event'] ),
- 'regClassesJSON' => json_encode( $regEventSample['reg_class'] )
+ 'regClassesJSON' => json_encode( $regEventSample['reg_class'][1] )
);
// Return status, any suggested view, and any data to controller
return array(
<div id="eventapp"></div>
{* Underscore Templates for the Event Registration App *}
{literal}
-<script type="text/template" id="eventReg-template">
+<script type="text/template" id="regEvent-template">
<h2><%= event_name %></h2>
<div class="glm-reg-compcode-entry">
<input type="text" placeholder="Enter Comp Code Here" />
</div>
<p> - event description - </p>
+ <div class="glm-reg-entryforms clearfix">
+ <div class="glm-reg-dates">
+ <h4>Pick your registration dates</h4>
+ <input type="date" placeholder="Enter Date" />
+ <input type="text" placeholder="Enter Time" />
+ </div>
+ <div class="glm-reg-submit">
+ <input type="submit" value="Continue to Cart" />
+ </div>
+ </div>
</script>
-<script type="text/template" id="eventRegistrant-template">
+<script type="text/template" id="account-template">
<a class="glm-reg-level-registrant-delete">Delete</a>
<label class="registrant-label">
<span class="glm-reg-level-registrant-name"><%= name %></span>
<input type="submit" class="saveRegistrant" value="Save">
</div>
</script>
+<script type="text/template" id="regClass-template">
+ <h3><%= name %></h3>
+ <p><%= descr %></p>
+ <div class="registrant-add clearfix">
+ <input type="text" class="addName" placeholder="Enter Name">
+ <input type="text" class="addEmail" placeholder="Enter Email Address">
+ <input type="submit" class="addRegistrant" value="Add">
+ </div>
+</script>
<script type="text/template" id="eventReg-account-login">
<input class="email">
<input class="password">
<input type="submit" class="accountLogin" value="Login">
</script>
{/literal}
-{**********
-<script class="text/template" id="eventReg-account">
- <div class="eventReg-account-name"><%= fname %><%= lname %></div>
- <div class="eventReg-account-email"><%= email %></div>
-</script>
-***********}
-<div class="glm-reg-event-list">
- {$event = $entry.reg_event}
- <div class="glm-reg-event-item clearfix">
- <h2>{$event.event_name}</h2>
- <div class="glm-reg-compcode-entry">
- <input type="text" placeholder="Enter Comp Code Here" />
- </div>
- <p> - description of event -</p>
- <div class="glm-reg-entryforms clearfix">
- <div class="glm-reg-dates">
- <h4>Pick your registration dates</h4>
- <input type="date" placeholder="Enter Date" />
- <input type="text" placeholder="Enter Time" />
- </div>
- {$levels = $entry.reg_class}
- {foreach $levels as $level}
- <div class="glm-reg-level">
- <h3>{$level.name}</h3>
- <p>{$level.descr}</p>
- <div class="registrant-add clearfix">
- <input type="text" class="addName" placeholder="Enter Name">
- <input type="text" class="addEmail" placeholder="Enter Email Address">
- <input type="submit" class="addRegistrant" value="Add">
- </div>
- <!-- <span class="glm-reg-level-add-registrant">+</span> -->
- </div>
- {/foreach}
- <div class="glm-reg-submit">
- <input type="submit" value="Continue to Cart" />
- </div>
- </div>
- </div>
+<div class="glm-reg-event-list" id="regApp">
</div>
{* Bootstrap the models needed on page load *}
-{* Need to have eventRegistration model created *}
-{* And create the regClasses collection *}
+{* Need to have RegEvent model created *}
+{* And create the RegClasses collection *}
<script>
+var app = app || {};
jQuery(document).ready(function($){
- var eventRegistration = new app.RegEvent;
- eventRegistration.set( {$regEventJSON} );
-
- var eventClasses = new app.RegClasses;
- eventClasses.reset( {$regClassesJSON} );
+ app.regEvent = new app.RegEvent;
+ app.regEvent.set( {$regEventJSON} );
+ app.regEvent.setClasses( {$regClassesJSON} );
+ new app.AppView();
});
</script>
projects / WP-Plugins / glm-member-db-registrations.git / commitdiff