i am trying to understand Backbone.js and how it works. i have created two textboxes that takes any values, and onclick of button(Multipy) the values are displayed in the boxes below, which works but i want the multiplication of two values to be shown in the third box – i tried to assign the both values to variables and multiply but it doesn’t seems to work. i think there is some problem with the returned value from textboxes, think it is NAN. Anyway please have a look and advise. i have commented out the code that is not working.
live url : http://egoless.co.uk/learning/learn_backbone/first-backbone-app.php
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="underscore.js">
</script><script type="text/javascript" src="backbone.js"></script>
<style>
.size {
width: 100px;
height: 30px;
border: solid 1px red;
float: left;
margin-left: 10px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<input type="text" id="box1" />
<input type="text" id="box2" />
<button id="myBtn">Multiply</button>
<br>
<br>
<div id="myBox" class="size"></div>
<div id="myBox2" class="size"></div>
<div id="myBox3" class="size"></div>
<script>
(function($){
//defining model 1
PersonModel1 = Backbone.Model.extend({
defaults:{
age : function(){
return $("input#box1").val();
}
}
});
myPerson1 = new PersonModel1();
//defining model 2
PersonModel2 = Backbone.Model.extend({
defaults:{
age : function(){
return $("input#box2").val();
}
}
});
myPerson2 = new PersonModel2();
//defining collection
Group = Backbone.Collection.extend({
Model: PersonModel1,
Model: PersonModel2,
url:"#"
})
People = new Group([]);
People.add(myPerson1);
People.add(myPerson2);
//adding view
ResultView = Backbone.View.extend({
el:'button',
events:{
'click':'render'
},
render:function(){
val1 = myPerson1.get('age');
val2 = myPerson2.get('age')
val3 = val1*val2 // not working
$('div#myBox').html(val1);
$('div#myBox2').html(val2);
$('div#myBox3').html(val3); // not working
$('input#box1').val("");
$('input#box2').val("");
return this;
}
})
$(document).ready(function(e) {
myResultView = new ResultView();
});
})(jQuery);
</script>
</body>
</html>
in defaults section of model definition you can only assign value to the attributes.
to return value age you should write separate function.
and you can call like this