0

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

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. 当我点击in时，如何调用WishList模型来执行。#addToWLHomeView

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

4

2 回答 2

1

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

问题出在这句话中：

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

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

于 2013-11-05T22:53:56.313 回答
0
  1. 这是因为#addToWL它可能不包含在您的WishList(View)HTML/模板中（如 @chfw 所述，@mu 太短）
  2. 你需要实例化你的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;
});
于 2013-11-06T05:14:57.553 回答