Just sharing. I’ve been breaking my noggin in Backbone Marionette so thought I’d share a really good structure I’ve whittled down a bit for creating a modular sidebar element.
It’s not perfect yet, it needs the call to the `auth class` removing and the user’s id either passing in on init or the controller extends a generic class with the user’s deets in it.
As always, comments are v. welcome. Either on JS or the HTML
| <span> | |
| <div class="profile-picture-wrapper"> | |
| <% if (profile.image && profile.image.file_resizable) { %> | |
| <img src="<%= profile.image.file_resizable.replace('{resize_spec)', 'w_200,h_200,c_fill,g_face') %>" class="profile-panel__image img-responsive" /> | |
| <% } %> | |
| </div> | |
| <button class="btn btn-info js__follow-user pre-icon icon-user-plus btn-short"><span>Follow</span></button> | |
| <h5 class="item-view__title js__clickThrough"><div class="username-wrapper"><%= username %></div></h5> | |
| <div class="stats"> | |
| <ul> | |
| <li><a href="#" class="icon-users js__myWhoFollowsUser"><span class="num"><%= profile.stats.followers %></span></a></li> | |
| <li><a href="#" class="icon-target js__myWhoDoesUserFollow"><span class="num"><%= profile.stats.following %></span></a></li> | |
| <li><a href="#" class="icon-calendar js__myEvents"><span class="num"><%= profile.stats.events_total %></span></a></li> | |
| </ul> | |
| </div> | |
| <div class="clear"></div> | |
| </span> |
| <div class="js__who-to-follow-cnt"> | |
| <h3>Who to follow…</h3> | |
| <div class="js__who-to-follow-list"></div> | |
| <a href="#" class="call-to-action">See all users</a> | |
| </div> |
| /** | |
| * Who to follow module | |
| */ | |
| define(['log', 'app', 'api/auth', 'common/no-items/view', 'common/single/item-view', 'text!events/list/templates/who-to-follow.html', 'text!events/list/templates/who-to-follow-item.html'], function (log, app, auth, NoItemsView, ItemView, templateCnt, templateItem) { | |
| 'use strict'; | |
| // Each person | |
| var ItemView = ItemView.extend({ | |
| tagName: 'li', | |
| template: _.template(templateItem), | |
| triggers: { | |
| click: 'item:click' | |
| } | |
| }); | |
| // Collection of people | |
| var CollectionView = Marionette.CollectionView.extend({ | |
| itemView: ItemView, | |
| emptyView: NoItemsView, | |
| className: "who-to-follow-wrapper", | |
| tagName: 'ol', | |
| initialize: function () { | |
| var that = this; | |
| // show profile | |
| this.listenTo(this, 'itemview:item:click', function(__item) | |
| { | |
| app.trigger('users:show', __item.model.get('id')); | |
| }); | |
| // User unfollow | |
| this.on('itemview:user:unfollow', function (view, id) { | |
| var request = app.request('user:unfollow', id); | |
| request.fail(function () { | |
| view.trigger('unfollow:error'); | |
| }); | |
| request.done(function () { | |
| view.trigger('unfollow:success'); | |
| }); | |
| }); | |
| // User follow clicks | |
| this.on('itemview:user:follow', function (view, uri) { | |
| var request = app.request('user:follow', uri); | |
| request.fail(function () { | |
| view.trigger('follow:error'); | |
| }); | |
| request.done(function () { | |
| view.trigger('follow:success'); | |
| }); | |
| }); | |
| this.itemViewOptions = { | |
| templateHelpers: { | |
| type: 'other occurrences' | |
| } | |
| }; | |
| } | |
| }); | |
| // The Controller's View | |
| var ContainerView = Marionette.Layout.extend({ | |
| template: _.template(templateCnt), | |
| collectionOrg: null, | |
| regions: { | |
| whoToFollowView: ".js__who-to-follow-list" | |
| }, | |
| events: { | |
| "click .call-to-action": "callToActionClick" | |
| }, | |
| callToActionClick: function (e) | |
| { | |
| e.preventDefault(); | |
| app.trigger("user:tag:all"); | |
| }, | |
| onRender: function () | |
| { | |
| // get our data | |
| var that = this, | |
| collection = app.request('user:search:everything:extended', {anything: "", rank: "buzz", limit: 6}); | |
| // | |
| collection.on('fetch:success', function () { | |
| var collectionToUse = collection; | |
| that.collectionOrg = collection; | |
| // randomise them | |
| collection.shuffle(); | |
| // removes yourself from the list if you're there | |
| var removeWhere = this.findWhere({id: auth.get('user').id}); | |
| collection.remove(removeWhere); | |
| }); | |
| // Load the Collection view | |
| this.whoToFollowView.show(new CollectionView({collection: collection})); | |
| } | |
| }); | |
| // | |
| return Marionette.Controller.extend({ | |
| // ref to it's container view | |
| _whoToFollowCnt: null, | |
| initialize: function(){ | |
| // begin | |
| this._whoToFollowCnt = new ContainerView(); | |
| }, | |
| toRender: function () | |
| { | |
| return this._whoToFollowCnt; | |
| } | |
| }); | |
| }); |
