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
});
<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>
.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;
}
External resources loaded into this fiddle: