Backbone.js with jQuery not altering the dom as expected

Question

store-models.js model

    (function ($) {

  Category = Backbone.Model.extend({
    //Create a model to hold friend atribute
    name: null
  });

  Categories = Backbone.Collection.extend({
    //This is our Friends collection and holds our Friend models
    initialize: function (models, options) {
      this.bind("add", options.view.addFriendLi);
      //Listen for new additions to the collection and call a view function if so
    }
  });

  CategoryView = Backbone.View.extend({
    el : $("li"),
    initialize:function(){
          $(this.el).html(this.model.get("name"));
          console.log("initialize"+this.model.get("name"));
    },
    events:{
        "click": "showPrompt",
    },
    showPrompt : function(){
        alert("test");
    }
  });

  AppView = Backbone.View.extend({
    el: $("body"),
    initialize: function () {
      this.friends = new Categories( null, { view: this });

      //Create a friends collection when the view is initialized.
      //Pass it a reference to this view to create a connection between the two
    },
    events: {
      "click #add-friend":  "showPrompt",
    },
    showPrompt: function () {
      var friend_name = prompt("Who is your friend?");
      var friend_model = new Category({ name: friend_name });
      //Add a new friend model to our friend collection
      this.friends.add( friend_model );
    },
    addFriendLi: function (mymodel) {
      //The parameter passed is a reference to the model that was added
      friendView = new CategoryView({model: mymodel});
      $("#categories").append(friendView.el);
      console.log(friendView.el);
      //Use .get to receive attributes of the model
    }
  });  

    setTimeout('addCategories()',2000);
//    var appview = new AppView;
})(jQuery);

function addCategories()
{
    var appview = new AppView;
    appview.showPrompt();

}

Html

    <!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

    <!-- Basic Page Needs
  ================================================== -->
    <meta charset="utf-8">
    <title>{% block title %}This is the title{% endblock %}</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Mobile Specific Metas
  ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- CSS
  ================================================== -->
    <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="/static/css/skeleton.css">
    <link rel="stylesheet" href="/static/css/layout.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Favicons
    ================================================== -->
    <link rel="shortcut icon" href="/static/images/favicon.ico">
    <link rel="apple-touch-icon" href="/static/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/static/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/static/images/apple-touch-icon-114x114.png">
    <script src='/static/js/jquery.js' ></script>
    <script src='/static/js/underscore.js' ></script>
    <script src='/static/js/backbone.js' ></script>
    <script src="/static/js/tabs.js"></script>
    <script src="/static/js/store-models.js"></script>
</head>
<body>

    <div id="categories">
    </div>
</body>

The issue is that the code is not appending li elements to the categories-list , even though front he backbone.js code it looks like it should.

Any suggestions here??

Are you getting any javascript errors in your Developer Tools Console? What is it you are seeing? — veeTrain, Apr 23 '12 at 12:47
yes something on the lines of the following "Uncaught TypeError: Object # — Neeraj, Apr 23 '12 at 12:49
I know the `on` method was introduced with jQuery 1.7 and it looks like you haven't specified a particular version to include. Are you sure your jQuery version is 1.7+? tabs.js most likely requires it. — veeTrain, Apr 23 '12 at 12:53
yes this is something i need to checkout.. gimme a few minutes ill get back to you after updating the version if I was not using the latest one already — Neeraj, Apr 23 '12 at 13:14
after updating the error seems to have gone away, but the actual issue still remains.. — Neeraj, Apr 23 '12 at 13:20

drinchev · Accepted Answer · 2012-04-23T13:26:17.920

2

As a beginning check this :

You've left your addCategories() function outside of the scope, and I think it would not access your AppView class

Remove the unnecessary quotes in setTimeout to supply a proper callback

/* ... code ... */

function addCategories()
{
   var appview = new AppView;
   appview.showPrompt();
} 

setTimeout(addCategories,2000);

})(jQuery);

Your code will work if you do the change

Edit:

You have no "li" element in your category view ( because you haven't created nothing )

That's why your CategoryView.el is always undefined.

Instead of setting it in the view extend, you should set it as soon as you have a model to fill it in.

CategoryView = Backbone.View.extend({
   initialize:function(){
      this.setElement($("<li>"+this.model.get("name")+"</li>"));
      log("initialize"+this.model.get("name"));
   },

   /* rest of code */

You could then experiment in the updated jsfiddle of your code which is here

edited Apr 23 '12 at 13:26

answered Apr 23 '12 at 13:04

drinchev

19,201
4
67
93

I tried the changes and they dont seem to work.I don't think its an issue with the scope. Any other suggestions?? – Neeraj Apr 23 '12 at 13:12
Did you mean this.el.setElement ?? coz this code throws en error "No method setElement for this" – Neeraj Apr 23 '12 at 13:32
And i was under the impression that if you do not specify el, or an unexistend el, then backbone creates a div internally for you – Neeraj Apr 23 '12 at 13:33
Yes but if you want to do this you'll have to set `tagName : "li"` not `el : $("li")` it's just a different approach, which I don't know you are looking for! – drinchev Apr 23 '12 at 13:35
not this.el.setElement it's just this.setElement as in the example, you have to call the View method setElement... look at the sample code – drinchev Apr 23 '12 at 13:46
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/10391/discussion-between-drinchev-and-neeraj) – drinchev Apr 23 '12 at 13:48

Backbone.js with jQuery not altering the dom as expected

1 Answers1

Edit: