Question

我有一个看起来像：

的backbone.js应用程序

var StoreView = Backbone.View.extend({
el: ".container",
initialize: function() {
    this.render();
},

events: {
    "click #addProduct": "addProduct",
},

render: function() {
    this.$el.html(render("index"));
},

addProduct: function(){
    var productView = new StoreProductView({
        el: $('#products')
    });
    productView.render();
}
});

我的storeProductView.js看起来像：

var StoreProductView = Backbone.View.extend({
   render: function () {
      this.$el.append(render("products/product"));

      $('.menu').dropit();

      return this;
   },
   events: {
      "click .changeProductType": "changeProductType"
   },
   changeProductType: function (e) {
      alert( e.this.data() );
   }
});

这是StoreProductView模板：

<div class='product'>
  <ul class="menu">
    <li>
      <a href="#">Menu</a>
      <ul>
          <li><a class='changeWidgetType' data-type='model' href="#">Model</a></li>
          <li><a class='changeWidgetType' data-type='color' href="#">Color</a></li>
          <li><a class='changeProductType' data-type='book' href="#">Book</a></li>
      </ul>
    </li>
 </ul>
</div>

基本上，当你点击#addProduct时，会调用一个新的StoreProductView。许多可以在一个页面上调用。每个StoreProductView都有一个.menu，它使用DropIt jQuery插件来获取下拉列表。

我有两个问题：

当您点击菜单中的链接时，它应该提醒数据类型是什么（所以当您点击＆＃34;模型＆＃34;它应该提醒模型）。现在它说Uncaught TypeError: Cannot read property 'data' of undefined
DropIt菜单仅适用于渲染的第一个StoreProductView。如果你有两个StoreProductView被渲染，点击第二个菜单就没有任何反应。

主干菜单查看问题

0 个答案: