Some start from nothing
Some start with something
1. var CenterPhotoCarouselView = Backbone.View.extend({
2. el: '.center-carousel',
3. events:{
4. 'click .left-arrow': 'moveCarouselLeft'
5. 'click .right-arrow': 'moveCarouselRight'
6. },
7. initialize: function(){
8. var photoCount = this.$el.find('li').length;
9. },
10. moveCarouselLeft: function(event){}
11. });
Throw it all into initialize or render!
1. var CenterPhotoCarouselView = Backbone.View.extend({
2. el: '.center-carousel',
3. initialize: function() {
4. this.$el.find('ul').jcarousel({
5. jcarouselNext: '.next',
6. jcarouselPrev: '.prev',
7. auto: 2,
8. vertical: false,
9. scroll: 1,
10. btnNextEvent: 'click',
11. btnPrevEvent: 'click',
12.
13.
14.
15.
16.
17. });
18. }
19. });
1. var CarouselView = Backbone.View.extend({
2. initialize: function(options){
3. this.carouselOptions = _.defaults(options, {
4. jcarouselNext: '.next',
5. jcarouselPrev: '.prev',
6. auto: true
7. //required jQuery plugin initialization
8. //spaghetti goes here
9. });
10. this.$el.find('ul').jcarousel(this.carouselOptions);
11. }
12. });
13.
14. var centerCarouselView = new CarouselView({
15. el: '.photos-atlanta',
16. jcarouselNext: '.next-atlanta',
17. jcarouselPrev: '.prev-atlanta'
18. });
Rigidity
Something new will always come along
Design Patterns
We use facades all the time
Backbone.Model.prototype.save
Backbone.History
$(document).ready(func);
$.ajax(options);
$('input').val(newVal);
let's build a facade
How to find important pieces?
Which parts differ?
1. var CarouselView = Backbone.View.extend({
2. initialize: function(options){
3. var carouselOptions = _.defaults(options, {
4. nextButtonSelector: '.next',
5. prevButtonSelector: '.prev',
6. autoStart: false
7. //required jQuery plugin initialization
8. //spaghetti goes here
9. });
10. this.$el.find('ul').jcarousel({
11. jcarouselNext: carouselOptions.nextButtonSelector,
12. jcarouselPrev: carouselOptions.prevButtonSelector,
13. auto: carouselOptions.autoStart
14. });
15. }
16. });
17.
18. //no jCarousel anywhere
19. var atlantaView = new CarouselView({
20. el: $('.photos-atlanta'),
21. nextButtonSelector: '.next',
22. prevButtonSelector: '.prev',
23. autoStart: true //your own name if you want
24. });
carouselView.moveLeft(2)
carouselView.start()
carouselView.stop()
1. var CarouselView = Backbone.View.extend({
2. moveRight: function(){
3. this.$el.data('jcarousel')('move')(1)
4. },
5. moveLeft: function(){
6. this.$el.data('jcarousel')('move')(-1)
7. },
8. start: function(){
9. this.$el.data('jcarousel')('startAuto');
10. },
11. stop: function(){
12. this.$el.data('jcarousel')('stopAuto');
13. }
14. });
15.
16. atlantaView.start();
1. var CarouselView = Backbone.View.extend({
2. initialize: function(){
3. if(this.onSlideStart) {
4. this.$el.data('jcarousel')
5. .on('slide', _.bind(this.slideStart, this));
6. }
7. if(this.onSlideEnd) {
8. this.$el.data('jcarousel')
9. .on('slide', _.bind(this.slideEnd, this));
10. }
11. }
12. });
13.
14. var ChattanoogaView = CarouselView.extend({
15. initialize: function(){
16. CarouselView.prototype
17. .initialize.apply(this, arguments);
18. },
19. onSlideStart: function(){
20. // update carousel progression counter
21. }
22. });
// CarouselView's initialize
=========================================================
10. this.$el.find('ul').jcarousel({
11. jcarouselNext: carouselOptions.nextButtonSelector,
12. jcarouselPrev: carouselOptions.prevButtonSelector,
13. auto: carouselOptions.autoStart
14. });
=========================================================
10. this.$el.find('ul').newCarousel({
11. nextSelector: carouselOptions.nextButtonSelector,
12. prevSelector: carouselOptions.prevButtonSelector,
13. immediate: carouselOptions.autoStart
14. });
2. moveRight: function(){
3. this.$el.data('jcarousel')('move')(1)
4. },
5. moveLeft: function(){
6. this.$el.data('jcarousel')('move')(-1)
7. },
8. start: function(){
9. this.$el.data('jcarousel')('startAuto');
10. },
11. stop: function(){
12. this.$el.data('jcarousel')('stopAuto');
13. }
=========================================================
2. moveRight: function(){
3. this.$el.newCarousel().trigger('move', 1);
4. },
5. moveLeft: function(){
6. this.$el.newCarousel().trigger('move', 1);
7. },
8. start: function(){
9. this.$el.newCarousel().trigger('startAnimation');
10. },
11. stop: function(){
12. this.$el.newCarousel().trigger('stopAnimation')
13. }
3. if(this.onSlideStart) {
4. this.$el.data('jcarousel')
5. .on('slide', _.bind(this.slideStart, this));
6. }
7. if(this.onSlideEnd) {
8. this.$el.data('jcarousel')
9. .on('slide', _.bind(this.slideEnd, this));
10. }
=========================================================
3. if(this.onSlideStart) {
4. this.$el.newCarousel()
5. .on('slide', _.bind(this.slideStart, this));
6. }
7. if(this.onSlideEnd) {
8. this.$el.newCarousel()
9. .on('slide', _.bind(this.slideEnd, this));
10. }