CODEWITHSUNDEEP
javascriptjqueryhtmlajaxbackbone.js
Muhammad Taqi
Muhammad Taqi

Reputation: 5424

Handling the model events in Backbone Js

I have write following script to update a value dynamically without refreshing, The Script is OK but id didn't display the updated value in the page. However in the Console of Chrome browser it displays the updated value of attribute but in the page it doesn't.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Pass Data to Views</title>
</head>
<body>
  <!-- ========= -->
  <!-- Your HTML -->
  <!-- ========= -->

  <div id="container"></div>

  <!-- ========= -->
  <!-- Libraries -->
  <!-- =========
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>  -->
  <script src="js/jquery.min.js" type="text/javascript"></script>
  <script src="js/underscore-min.js" type="text/javascript"></script>
  <script src="js/backbone-min.js" type="text/javascript"></script>
  <script src="js/backbone.localStorage-min.js" type="text/javascript"></script>
  <!-- =============== //
  <!-- Javascript code -->
  <!-- =============== -->
  <script type="text/javascript">

  // Model
  var Song = Backbone.Model.extend({
    defaults: {
      listeners: 0
    }
  });

var SongView = Backbone.View.extend({
  initilize: function(){
    this.model.on("change", this.render,this);
  },

  render: function(){
    this.$el.html(this.model.get("title") + " - Listerners : " + this.model.get("listeners"));
    return this;
  }
});

var song = new Song({title: "Blue in Green"});
var songView = new SongView({el: "#container", model: song});
songView.render();
</script>

</body>
</html>

Upvotes: 1

Views: 77

Answers (1)

Anastasia
Anastasia

Reputation: 184

It looks like you forgot to add the view to your html page. You need a line like this in your script:

$('body').append(songView.render().el);

Instead of 'body', you can use any other element you want.

One more thing: you have a typo in the word "initialize" in the song view. For this reason, the listener in the view does not react to changes.

Upvotes: 2

Related Questions