Javascript 视图不'；点击主干中的一个按钮就不能工作_Javascript_Backbone.js

Javascript 视图不'；点击主干中的一个按钮就不能工作

javascript backbone.js

Javascript 视图不'；点击主干中的一个按钮就不能工作,javascript,backbone.js,Javascript,Backbone.js,我有一个包含多个按钮的视图来执行不同的操作 var HomeView = Backbone.View.extend({ initialize: function() { }, events : { 'click #addToWL' : 'addWishList' }, addWishList : function(){ var _wishList = new WishList(); _wishList.set({

我有一个包含多个按钮的视图来执行不同的操作

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;

以下是另一个文件中的愿望列表视图：

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

当我点击

HomeView

中的

#addToWL

按钮时，

WishList

视图中的

初始化

功能正在工作，但

addWishList

功能没有工作

当我在

HomeView

中单击

#addToWL

时，如何调用

愿望列表

模型来执行

我只是从Backbone.js开始，非常感谢您的帮助。谢谢。

我无法添加评论，所以我把我的想法作为答案放在这里

问题在于这句话：

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

因为您的愿望列表中只有“tsest”，所以我认为您不能期望主干在按钮上绑定一个事件处理程序，而该按钮在el中并不存在

这是因为

#addToWL

可能未包含在您的

愿望列表（视图）

HTML/模板中（如@chfw和@mu所述太短）

您需要实例化

WishList（模型）

inside

HomeView.addWishList

大约1。因此，

#addToWL

click事件在该视图内从未触发，并且从未调用

WishList（View）.addWishList

方法

想法（只是我的意见）：

我不会把
```
#addToWL
```
按钮放在
```
愿望列表（视图）
```
无论如何（在我看来，它“物理地”在这个
```
视图之外）
```


因此，'click#addToWL'：'addWishList'
事件处理程序应该只出现在主视图中，而不再出现在WishList（视图）
中

您的WishList（View）
不应声明属性el:“#webbodycontainer”
，因为此元素似乎是页面的整个容器
但它应该声明自己的、更小、更包含的元素（这里有一个
列表很有意义！）
而HomeView
应该声明它。。。AsHomeView
负责页面的整个容器


大约2点。
顺便说一句，您从不实例化您的WishList（Model）
，而只是将引用传递给WishList
构造函数：
var _wlView = new WishListView({model:WishList});

您需要将WishList（Model）
的实例传递到视图
：
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;
});

define（[“下划线”、“主干”、“应用程序/模型/愿望列表”]），function（\ux，主干，愿望列表）{
var HomeView=Backbone.View.extend({
el:“#webbodycontainer”，
活动：{
“单击#添加列表”：“添加列表”
},
addWishList:function（）{
var_wishList=新wishList（）；
_愿望清单({
“ID”：0，
“名称”：“，
“客户ID”：106，
“类型”：0，
“最新更新”：“\/日期（13831540000+0700）\/”，
“愿望详情”：[
{
“ID”：0，
“愿望列表”：0，
“项目ID”：22776，
“数量”：2，
“最近更新”：“\/日期（13831540000+0700）\/”
}
]
});
_wishList.save（）；
var_wlView=new WishListView（{model:_wishList}）；
},
render:function（）{
这个.$el.html（homePanel）；
$（“#containernewpromotion”）.html（promotionItem）；
}
});
返回HomeView；
});
定义（[“下划线”、“主干线”]），函数（ux，主干线）{
var WishListView=Backbone.View.extend({
标记名：“ul”，
初始化：函数（）{
log（“初始化愿望列表视图”）；
},
render:function（）{
//此.$el.html（“tsest”）；
//可能更像那样。。
//注:
//-此.$el已经是主干在该点自动创建的元素
//-this.model是我们的愿望列表（model）实例-->\u愿望列表
//-我假设此方法存在：WishList（Model）.getwisks（）-->返回列表中的愿望列表
这个。$el.empty（）；
_.each（this.model.getwisks（），函数（wishModel）{
这个.el.append（''+wishModel.get（'name'）+''）；
});
}
});
返回愿望视图；
});
是否有重复的#addToWL
<代码>id属性必须是唯一的。HTML是什么样子的？@muistooshort:require.js text的HTML模板中只有一个#addToWL
！插件，
因此#addToWl
不在愿望列表el
中？没有愿望列表el
：：没有el
就无法查看。主干将为您创建一个，视图的el
是事件绑定的位置。但是我指定了el:“#webbodycontainer”
，按钮位于el
@domao:Butthis.$el.html（…）
然后将替换el
的内容。那么WishList
模型如何？单击按钮时出现一个错误：TypeError:WishList不是构造函数var\u WishList=new WishList（）哎呀，这是因为我没有把返回愿望列表在WishList
模型中。是的，这很奇怪。如果将model
传递给视图控制器，则它应在视图中作为此属性提供。model
属性：。因此，请确保您正在从正确的范围调用console.log（this.model）
，或者查找输入错误。此外，您可能需要更新问题中的代码，以查看现在发生了什么。