Home/ Questions/Q 7826839
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T09:35:58+00:00

store-models.js model (function ($) { Category = Backbone.Model.extend({ //Create a model to hold friend

  • 0

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??

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As a beginning check this :

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

    2. 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

    • 0