BB: Trigger child view event up to parent view

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<div class="js-ctn"></div>

<script type="text/template" class="js-template">
    <h1>Hey, <%= name %></h1>
</script>
        
<script type="text/template" class="js-btn-template">
    <button class="js-trigger">Trigger to parent</button>
</script>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500);

body {
    font-family: Roboto;
    color: #191919;
}

a {
    color: #191919;
}

JavaScript

console.clear();

// Dummy Data
var data = {
    "id": 1,
    "name": "Kyle"
}


// Classes
var PersonModel = Backbone.Model.extend({
    defaults: {
        'deletable': false
    }
});
var PersonView = Backbone.View.extend({
      
	template: _.template( $('.js-template').html() ),
    
    initialize: function() {
        console.log(this.model.toJSON());
        
        this.buttonView = new ButtonView;
        
        this.listenTo(this.buttonView, 'button:clicked', this.onSubviewClicked, this);
    },
     
    render: function() {
		this.$el.html( this.template( this.model.toJSON() ) ); 
        
        // Add button view
        this.$el.append(this.buttonView.render().el);
                
        return this;
    },
    
    onSubviewClicked: function() {
        console.log('onSubviewClicked');
    }
});

var ButtonView = Backbone.View.extend({
    
    events: {
        'click .js-trigger': 'onTriggerButtonClick'
    },
    
    template: _.template( $('.js-btn-template').html() ),
                                      
    render: function() {
        
        this.$el.html( this.template() ); 
		
        return this;
	},
    
    onTriggerButtonClick: function(event) {
        event.preventDefault();
                
        this.trigger('button:clicked');
    }
});

// Setup
var personModel = new PersonModel(data, {parse:true});
var personView = new PersonView({
	model: personModel
});

// Add to DOM
$('.js-ctn').html(personView.render().el);