Question

我是Backbone的新手，虽然我做了一些研究，但在创建模态方面，我找不到适合我的解决方案。我想创建一个基础Modal类，然后在我的其他视图/类中重用/扩展它并应用不同的模板。

这是我的Modal基类：

define([
  // Application.
  'app',
  'backbone',
  'plugins/jquery-ui.custom',
  'moment'
], function(App, Backbone) {
  // Create a new module.
  var Modal = App.module();

  Modal.View = Backbone.View.extend({
      className: 'ui-modal',

  render: function () {
      console.log('this.$el',this.$el,'this.template',this.template);
        this.$el.html(this.template());
        this.$el.delegate('.close', 'click', this.closeModal);
        this.error = this.$el.find('.error');
        return this;
      },

  closeModal: function (ev) {
        if (ev) ev.preventDefault();
        this.$el.unbind();
        this.$el.empty();
        this.$el.remove();
      },

  initialize: function () {
      console.log('initialize modal view', 'this.$el', this.$el);
        _.bindAll(this, 'render', 'closeModal');
        return Backbone.View.prototype.initialize.call(this);
    }
  });

我正在尝试扩展/使用Modal类：

ProductDetails.Views.testView = Modal.View.extend({
    template: 'modals/ProductDetails/testView',
    render: function() {
      Modal.View.prototype.render.call(this);
      this.delegateEvents();
      return this;
    },
    initialize: function() {
      console.log('initialize testView','this.$el',this.$el);
      return Modal.View.prototype.initialize.call(this);
    }
  });

然后我试图在这里触发模态：

ProductDetails.Views.Description = Backbone.View.extend({
    template: 'partials/product/description',
    initialize: function(){
      _.bindAll(this, 'serialize', 'warn', 'error', 'updateModel', 'testModalView');

      //instantiate the test modal
      this.testView = new ProductDetails.Views.testView();

      this.testView.$el = this.$el;
    },
    serialize: function(){
     //some stuff
    },
    events: {
      'click .testModalView_link': 'testModalView'
       //some other stuff
    },
    warn: function() {
      //some stuff
    },
    error: function(error){
      //some stuff
    },
    updateModel: function(e){
      //some stuff
    },
    testModalView: function(ev) {
      try {
        ev.preventDefault();
        $('.ui-modal').append(this.testView.render())
      } catch(e) {
        console.log(e.message,e);
      }
    }
  });

我已经进行了双重检查，但在尝试简化包含在此问题中的代码时，我可能犯了一个错误。当我通过单击链接（使用类.testModalView_link）测试我的模态时，我得到错误：＆＃34; TypeError：this。$ el is undefined＆＃34;，它指向模态基类，到这一行：

this.$el.html(this.template());

任何人都可以帮助我完成这项工作，或者至少了解我做错了什么？

感谢。

Answer 1

感谢您的帮助。我将继续解决这个问题，我花了很多时间调试它，甚至研究其他实现;最后我相信问题是我们加载和编译模板的方式，或者我们正在使用的库/插件的版本。我还注意到，当DOM未完全加载或在呈现之前访问元素时会发生类似的问题;再次，也可能是绑定和回调，范围没有得到妥善处理。如果我重新审视问题并找到可靠的答案，我一定会提供更新。

使用Backbone.js创建模态

1 个答案: