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;

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

当我点击#addToWL中的HomeView按钮时，initialize视图中的WishList功能正常，但addWishList功能没有
当我点击WishList中的#addToWL时，如何调用HomeView模型执行。

我刚开始使用Backbone.js，非常感谢任何帮助。感谢。

Answer 1

我无法添加评论，所以我把我的想法作为答案。

问题出在这句话中：

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

因为你的心愿单中只有“tsest”，所以我认为你不能期望Backbone在你的el中不存在的按钮上绑定一个事件处理程序。

Answer 2

这是因为#addToWL可能未包含在您的WishList(View) HTML /模板中（如@chfw所述，@ mu太短）
您需要在WishList(Model)

HomeView.addWishList

约1。

因此，#addToWL点击事件永远不会在该视图中触发，WishList(View).addWishList方法永远不会被调用。

思考（只是我的观点）：

我不会将#addToWL按钮放在WishList(View)内无论如何（因为在我看来它是“物理上”在View之外）
因此，'click #addToWL' : 'addWishList'事件处理程序应仅出现在HomeView中，而不再出现在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;
});

查看无法在骨干网上单击按钮

2 个答案:

约1。

约2。