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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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; | |
| } | |
| }); | |
| }); |
Dan Course - Product Manager 