View doesn't work onclick a button in backbone

Question

I have a view that contain multiple buttons do difference action.

var HomeView = Backbone.View.extend({
   initialize: function() {

   },
   events : {
       'click #addToWL' : 'addWishList'
   },
   addWishList : function(){
        var _wishList = new WishList();
        _wishList.set({
           "ID" : 0,
           "Name" : "",
           "CustomerID" : 106,
           "Type" : 0,
           "LastUpdated" : "\/Date(1383152400000+0700)\/",
           "WishlistDetail" : [
               {
                   "ID" : 0,
                   "WishListID" : 0,
                   "ItemID" : 22776,
                   "Quantity" : 2,
                   "LastUpdated" : "\/Date(1383152400000+0700)\/"
               }
           ]
       });
       _wishList.save();
       var _wlView = new WishListView({model:_wishList});
   },
   render : function(){
       this.$el.html(homePanel);
       $("#containernewpromotion").html(promotionItem);
   }
});
return HomeView;

Here is the WishList view in another file :

var WishList = Backbone.View.extend({

    tagName: 'ul',

    initialize:function(){
        console.log("initialize wish list view");
    },

    render: function(){
        this.$el.empty();
        var wishlistView = _.template(WishListTemplate);
        this.$el.append(wishlistView);
    }
});
return WishList;

Here's the WishList model :

define(["underscore" , "backbone"],function(_ , Backbone){

var WishList = Backbone.Model.extend({
    url  :'//path to REST AddWishList',
    idAttribute: 'ID'
});

var _wishList = new WishList();
_wishList.set({
    "ID" : 0,
    "Name" : "",
    "CustomerID" : 106,
    "Type" : 0,
    "LastUpdated" : "\/Date(1383152400000+0700)\/",
    "WishlistDetail" : [
        {
            "ID" : 0,
            "WishListID" : 0,
            "ItemID" : 22776,
            "Quantity" : 2,
            "LastUpdated" : "\/Date(1383152400000+0700)\/"
        }
    ]
});

  _wishList.save();
  return WishList;
});    

1. When I click on #addToWL button in HomeView , the initialize function in WishList view is working, but addWishList function didn't.

2. How can I call the WishList model to execute, when I click on #addToWL in HomeView .

I'm just starting with Backbone.js, Any help is much appreciated. Thanks.

Answer 1

I cannot add a comment so I put my thought as an answer here.

The problem is in this statement:

this.$el.html("tsest");

Because your wishlist has only "tsest" in it, I don't think you can expect Backbone to bind an event handler on the button that does not exist in your el.

Answer 2

1. This is because #addToWL is probably not contained into your WishList(View) HTML/template (as noted by @chfw and @mu is too short)
2. You need to instantiate your WishList(Model) inside HomeView.addWishList

About 1.

As a result the #addToWL click event is never triggered inside that View and the WishList(View).addWishList method never gets called.

Thoughts (just my opinion):

• I wouldn't put the #addToWL button inside the WishList(View) anyways (as it seems to me that it is "physically" outside this View )
• So the 'click #addToWL' : 'addWishList' event handler should only be present in HomeView , not in WishList(View) anymore
• Your WishList(View) shouldn't declare the property el: '#webbodycontainer' as this element seems to be the entire container of the page...
• But it should rather declare its own, smaller, more contained, element (a <ul> list would make sense here!)
• And HomeView should declare it instead... As HomeView is in charge of the whole container of the page.

About 2.

BTW you are never instantiating your WishList(Model) but only passing the reference to the WishList constructor:

var _wlView = new WishListView({model:WishList});

You need to pass an instance of WishList(Model) to the View :

var _wlView = new WishListView({model:new WishList()});

---

So that would give something like that:

define(["underscore" , "backbone", "app/models/wishlist"], function(_, Backbone, WishList){
  var HomeView = Backbone.View.extend({

     el: '#webbodycontainer',
     events : {
         'click #addToWL' : 'addWishList'
     },
     addWishList : function(){

          var _wishList = new WishList();
          _wishList.set({
                "ID" : 0,
                "Name" : "",
                "CustomerID" : 106,
                "Type" : 0,
                "LastUpdated" : "\/Date(1383152400000+0700)\/",
                "WishlistDetail" : [
                    {
                        "ID" : 0,
                        "WishListID" : 0,
                        "ItemID" : 22776,
                        "Quantity" : 2,
                        "LastUpdated" : "\/Date(1383152400000+0700)\/"
                    }
                ]
            });
           _wishList.save();

         var _wlView = new WishListView({model:_wishList});
     },
     render : function(){
         this.$el.html(homePanel);
         $("#containernewpromotion").html(promotionItem);
     }
  });
  return HomeView;
});

define(["underscore" , "backbone"], function(_, Backbone){
  var WishListView = Backbone.View.extend({

      tagName: 'ul',

      initialize:function(){
          console.log("initialize wish list view");
      },

      render: function(){

       // this.$el.html("tsest");

// Probably something more like that..
// Notes:
//  - this.$el is already an <UL> element automatically created by Backbone at that point
//  - this.model is our WishList(Model) instance --> _wishList
//  - I'm assuming this method exist: WishList(Model).getWishes() --> Returns the list of wishes inside the list

       this.$el.empty();

       _.each(this.model.getWishes(), function (wishModel) {
         this.$el.append('<li>'+wishModel.get('name')+'</li>');
       });
     }
  });
  return WishListView;
});