單擊骨干中的按鈕后視圖不起作用

Question

我有一個包含多個按鈕的視圖，它們的作用不同。

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;

這是另一個文件中的WishList視圖：

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;

這是願望清單模型：

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. 當我點擊#addToWL按鈕HomeView的initialize函數WishList視圖中工作，但addWishList功能沒有。

2. 我怎么能叫WishList模型來執行，當我點擊#addToWL在HomeView 。

我只是從Backbone.js開始，非常感謝您的幫助。 謝謝。

Answer 1

我無法添加評論，所以我在這里以我的想法作為答案。

問題出在以下語句中：

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

因為您的願望清單中只有“ tsest”，所以我認為您不會期望Backbone將事件處理程序綁定到el中不存在的按鈕上。

Answer 2

1. 這是因為#addToWL可能未包含在您的#addToWL WishList(View) HTML /模板中（如@chfw和@mu所示太短）
2. 您需要在HomeView.addWishList實例化您的WishList(Model)

關於1。

結果，永遠不會在該View內部觸發#addToWL click事件，並且永遠不會調用WishList(View).addWishList方法。

想法（只是我的看法）：

• 無論如何，我都不會將#addToWL按鈕放在#addToWL WishList(View) （因為在我看來，它實際上是在此View之外）
• 因此， 'click #addToWL' : 'addWishList'事件處理程序應僅出現在HomeView ，而不再出現在'click #addToWL' : 'addWishList' WishList(View)
• 您的WishList(View)不應聲明屬性el: '#webbodycontainer'因為此元素似乎是頁面的整個容器...
• 但是它應該聲明自己的，更小，包含更多的元素（在這里<ul>列表很有意義！）
• 並且HomeView應該改為聲明它...因為HomeView負責頁面的整個容器。

大約2。

順便說一句，您永遠不會實例化您的WishList(Model)而只會將引用傳遞給WishList構造函數：

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

您需要將WishList(Model)的實例傳遞給View ：

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

---

這樣就可以得到類似的結果：

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;
});