Module to Module Communication with Choona.js

With Choona.js , It is easy to create Reusable Modules

HTML

<script src="https://rawgit.com/nsisodiya/choona.js/master/dist/choona.js"></script>
<div id="applicationContainer"></div>
<script id="module1" type="text/html">
    <div class="inputbox">
        <p><b>Module 1</b></p>
        <p>please enter numeric value</p>
        <input id="value1" type="text" />
        <input id="value2" type="text" />
        <input id="add" type="button" value="Add"/>    
    </div>
</script>



<script id="module2" type="text/html">
    <p><b>Module 2</b></p>
    <p>This module will receive two values using PubSub</p>
    <div id="result"></div>
</script>

CSS

.box {
    border: 1px solid red;
    height: 200px;
    width: 200px;
    padding: 20px;
    float:left;
}
input {
    width: 50%;
}
#result {
    color: red;
    font-size: 30px;
}
#applicationContainer {
    padding: 30px;
}

JavaScript

var myApp = {};
myApp.application = choona.View.extend({
    template: '<div class="box" id="inputbox"></div>' +
        '<div class="box" id="resultbox"></div>',
    initialize: function () {
        choona.View.apply(this, arguments);
        this.loadSubView({
            id: 'inputbox',
            module: myApp.inputbox
        });

        this.loadSubView({
            id: 'resultbox',
            module: myApp.resultbox
        });

    }
});

myApp.inputbox = choona.View.extend({
    template: $("#module1").html(),
    globalEvents: {},
    events: {
        "click #add": "onClickAddBtn"
    },
    initialize: function () {
        choona.View.apply(this, arguments);
    },
    onClickAddBtn: function () {
        this.publishGlobalEvent('additionEvent', {
            val1: this.$$.find("#value1").val(),
            val2: this.$$.find("#value2").val()
        });
    }
})

myApp.resultbox = choona.View.extend({
    template: $("#module2").html(),
    globalEvents: {
        "additionEvent": "onAdditionEvent"
    },
    events: {},
    initialize: function () {
        choona.View.apply(this, arguments);
    },
    onAdditionEvent: function (data) {
        var result = parseFloat(data.val1) + parseFloat(data.val2);
        this.$$.find("#result").html(result);
    }
})

var application = choona.loadView({
    id: "applicationContainer",
    module: myApp.application
});