Joel Kemp
JavaScript engineer at Bēhance.
<div class='button' id='fansMoreBtn' onclick='loadMoreFans()'>MORE</div>
2. No clear idea of which code does what, why, and where
var visible = Number({visible});
var inviteStr = "{inviteStr}";
var srcId= "{srcId}";
if (window.location.search.indexOf("v=1") > 0 ) {
visible = 0;
}
var userFirstName = '{ui_facebookFirstName}';
var userLastName = '{ui_facebookLastName}';
var userFacebookId = '{ui_facebookId}';
var UserModel = Backbone.Model.extend({
defaults: {
birthday: '',
age: 0,
sign: ''
},
initialize: function () {
// Determines the age from the birthday and sets the age for this user
this.computeAge();
this.computeZodiacSign();
},
computeZodiacSign: function () {
// Simplified logic
if (this.getMonth() === 'March' && this.getDay() >= 21 ||
this.getMonth() === 'April' && this.getDay() <= 20) {
this.set('sign', 'Aries');
}
}
});
var UserView = Backbone.View.extend({
tagName: 'div',
className: 'user',
template: _.template($('#user-template').html()),
render: function () {
this.$el.html(this.template(this.model.toJSON()));
}
});
The HTML Template
<script id="user-template" type="text/template">
<span>Your birthday is <%= birthday %></span><br />
<span>You are a <%= sign %></span><br />
<span>You are <%= age %> years old</span><br />
<span><%= fortune %></span><br />
</script>
var AppView = Backbone.View.extend({
el: 'app',
events: {
'click button.submit': 'handleSubmit'
},
handleSubmit: function () {
// Grab the birthday from the input fields
// Initialize a new User Model
// Create a User View whose model is the new model
// Render the view
// Add the rendered view's html somewhere
}
});
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/underscore.min.js"></script>
<script src="js/backbone.min.js"></script>
<script src="js/UserModel.js"></script>
<script src="js/UserView.js"></script>
<script src="js/AppView.js"></script>
<!-- All of your other plugins/scripts -->
</head>
<body>
</body>
</html>
(function(t,e){if(typeof define==="function"&&define.amd){define(["underscore","jquery","exports"],function(i,r,s){t.Backbone=e(t,s,i,r)})}else if(typeof exports!=="undefined"){var i=require("underscore");e(t,exports,i)}else{t.Backbone=e(t,{},t._,t.jQuery||t.Zepto||t.ender||t.$)}})(this,function(t,e,i,r){var s=t.Backbone;var n=[];var a=n.push;var o=n.slice;var h=n.splice;e.VERSION="1.1.2";e.$=r;e.noConflict=function(){t.Backbone=s;return this};e.emulateHTTP=false;e.emulateJSON=false;var u=e.Events={on:function(t,e,i){if(!c(this,"on",t,[e,i])||!e)return this;this._events||(this._events={});var r=this._events[t]||(this._events[t]=[]);r.push({callback:e,context:i,ctx:i||this});return this},once:function(t,e,r){if(!c(this,"once",t,[e,r])||!e)return this;var s=this;var n=i.once(function(){s.off(t,n);e.apply(this,arguments)});n._callback=e;return this.on(t,n,r)},off:function(t,e,r){var s,n,a,o,h,u,l,f;if(!this._events||!c(this,"off",t,[e,r]))return this;if(!t&&!e&&!r){this._events=void 0;return this}o=t?
define(['Backbone'], function (Backbone) {
return Backbone.Model.extend({
// Same implementation as before
});
});
define(['./UserModel', './UserView'], function (UserModel, UserView) {
var user = new UserModel();
...
})
var Backbone = require('Backbone');
module.exports = Backbone.Model.extend({
// Same stuff
});
var UserModel = require('./UserModel'),
UserView = require('./UserView');
var user = new UserModel();
module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { dist: { src: ['src/**/*.js'], dest: 'dist/<%= pkg.name %>.js' } }, uglify: { dist: { files: { 'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>'] } } },
jshint: { files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'] }, watch: { files: ['<%= jshint.files %>'], tasks: ['jshint'] } });
};
var gulp = require('gulp') , uglify = require('gulp-uglify') , minifyHTML = require('gulp-minify-html') , sass = require('gulp-sass');
gulp.task('build', function(){ var dist = 'dist/', dirPublic = 'public/' , distStylesheets = dist + dirPublic + 'stylesheets/' , distJavascripts = dist + dirPublic + 'javascripts/';
gulp.src('public/stylesheets/scss/*.scss') .pipe(sass()) .pipe(gulp.dest(distStylesheets)); gulp.src('*.html') .pipe(minifyHTML()) .pipe(gulp.dest(dist))
gulp.src('public/javascripts/*.js') .pipe(uglify()) .pipe(gulp.dest(distJavascripts)) });
gulp.task('default', function() { gulp.watch([ 'public/stylesheets/scss/**', 'public/javascripts/*.js', '*.html', '!dist/**' ], function(event) { gulp.run('build'); }); });
By Joel Kemp