-
-
Save gibbitz/8e3d0ad18370f6e1f578 to your computer and use it in GitHub Desktop.
simple js view for being extended
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
(function() { | |
'use strict'; | |
const View = require('./viewBase.js'); | |
new View({ | |
el: document.querySelector('a'), | |
model: {'foo': 'bar'} | |
}); | |
})(); |
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
(function() { | |
'use strict'; | |
module.exports = function(_options) { | |
// default property values | |
// provides a template object for _options overrides | |
var defaults = { | |
init : function(){ | |
this.addListeners(); | |
window.console.log('init', this); | |
}, | |
el : document.createElement('div'), | |
model : {}, | |
addListeners: function(){ | |
this.el.addEventListener('click', self.eventClick); | |
}, | |
eventClick : function(_e){ | |
window.console.log(_e, this); | |
_e.preventDefault(); | |
}, | |
render: function(){ | |
} | |
}; | |
// return a "class" instance | |
return new function ViewBase(_opts){ | |
Object.assign(this.constructor.prototype, defaults, _opts); | |
this.constructor.prototype.init.call(this); | |
this.constructor.prototype.render.call(this); | |
}(_options); | |
}; | |
})(); |
i like this style the best:
var selectorView = new ViewBase({
el:'.selector-class',
events:{
'mouseOver' : function(_event){
// handle code here
}
}
});
How could we support events on child elements? Backbone does this:
events: {
'click header button': 'eventMenuToggle',
'click #accessible-ajax-example-button': 'eventAccessibleAjax'
},
This looks pretty good, think I will roll with this for my views when i don't want to do something third party.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Removed the underscore dependency (since you're all ES6 up in this b*tch)
Added a prototypical return object. Though I don't think you're gaining much there. The legibility goes down a notch and the usage stays the same.
While digging about in this I started thinking about the signatures and expected behaviors and They're "secret-handshakey". They only feel okay because of our familiarity with Backbone. There's a lot of opportunity to make init calls dynamic or pass in UI interaction event listeners as options etc. That sticking too closely to an existing framework takes away from. For instance. returning the the pseudo class directly would allow a more vanilla :
or
Just some cents. Prolly not all 2 and likely without sense...