javascript - 主干.JS : View is not a contructor

Question

我正在尝试使用 Backbone.js 创建模块，但出现错误 Javascript Error: Uncaught TypeError: autoAuth.View is not a constructor。

Auth.js.erb

(function(app, Auth){
  var game = app.module('game');

  Auth.View = Backbone.View.extend({
    el: '.js-auth',

    cssClass: 'auth',

    events: {
      'click .js-popup': 'popupLogin',
      'click .js-login-with-email': 'emailLogin',
      'click .js-tos-modal': 'tosModal',
      'click .js-privacy-modal': 'privacyModal',
      'click .js-auto-login': 'autoLogin'
    },

    template: Handlebars.compile(
      <%= embed('../templates/auth.hbs').inspect %>
    ),

    initialize: function() {
      Handlebars.registerPartial('login-buttons',
        <%= embed('../templates/login-buttons.hbs').inspect %>
      );
    },

    render: function() {
      _.extend(this.options, {
        skipOnboarding: game.player.get('skip_onboarding'),
        claimableIncentive: game.incentive.get('claimable'),
        claimableAmount: game.incentive.get('amount'),
      });
      this.$el.addClass(this.cssClass);
      this.$el.html(this.template(this.options));

      growth.urlChangeNotification();
    },

    popupLogin: function(event) {
      event.preventDefault();
      event.stopPropagation();
      this.validateLogin(_.partial(popupLogin, event));
    },

    emailLogin: function(event) {
      this.validateLogin(_.partial(this.emailAuth, event));
    },

    autoLogin: function(event) {
      this.validateLogin(_.partial(this.autoAuth, event));
    },

    validateLogin: function(callback) {
      if (this.$el.find('#agree-to-tos').is(':checked')) {
        callback();
      } else {
        this.$el.find('.js-tos-error').show();
      }
    },

    emailAuth: function(view_option, value) {
      var emailAuth = app.module('emailAuth');
      var emailAuthView = new emailAuth.View;

      if (_.isString(view_option)) {
        emailAuthView.setViewOption(view_option);

        if (view_option === 'reset') {
          game.user.set('reset_password_token', value);
        }
      }

      emailAuthView.openModal({
        allowCancel: view_option !== 'reset'
      });
      emailAuthView.render();
    },

    autoAuth: function(view_option, value) {
      var autoAuth = app.module('autoAuth');
      var autoAuthView = new autoAuth.View;

      if (_.isString(view_option)) {
        autoAuthView.setViewOption(view_option);
      }

      autoAuthView.openModal({
        allowCancel: view_option !== 'reset'
      });
      autoAuthView.render();
    },

    tosModal: function() {
      var modal = new Backbone.BootstrapModal({
        content: <%= embed('../templates/terms-of-service.hbs').inspect %>
      }).open();
    },

    privacyModal: function() {
      var modal = new Backbone.BootstrapModal({
        content: <%= embed('../templates/privacy-policy.hbs').inspect %>
      }).open();
    }

  });
})(app, app.module('auth'));

AutoAuth.js.erb

function(app, AutoAuth)(
  var game = app.module('game');

  AutoAuth.View = ModalView.extend({
    view_modes: ['login'],

    template: Handlebars.compile(
      <%= embed('../templates/auto-auth.hbs').inspect %>
    ),

    events: {
      'submit #email-login': 'logIn',

      'click #login': function() {
        this.setViewOption('login');
        this.render();
      },
    },

    genericErrorMessage: 'Oops something went wrong! Please contact support.',

    initialize: function(options) {
      var self = this;
      this.options = options || {};
      this.setViewOption('login');
      _.bindAl(this, 'login');
      game.user.on({
        signin_sucess: function(){
          self.reloadPage();
        },

        signin_error: function(data) {
          self.options.error = false;
          self.setViewOption('login');
          var error = 'Unable to sign in with the given email and password.';
          if (data && data.error) { error = data.error; }
          self.options.signin_error = error;
          self.render();
        },

      })
    },

    setViewOption: function(view) {
      var self = this;
      _.each(self.view_modes, function(k) {
        self.options[k] = false;
      });
      self.options[view] = true;
    },

    render: function(){
      this.$el.html(this.template(this.options));

      if (mobile) window.scrollTo(0, 1); // hack for modals on mobile
      this.delegateEvents();
      this.clearErrors();

      var authPage =  _.chain(this.options)
        .pick(function(value, key) { return value; })
        .keys()
        .value()[0];

      growth.urlChangeNotification();
    },

    logIn: function(e) {
      e.preventDefault();
      this.options.email = this.$('#login_email').val();
      if (!validateEmail(this.options.email)) {
        this.options.signin_error = 'Must enter a valid email address.';
        this.render();
        return;
      }

      game.user.signIn({
        email: this.options.email,
        password: this.$('#login_password').val(),
        remember_me: true
      });
    },

    reloadPage: function() {
      window.location = window.location.href.substr(0, window.location.href.indexOf('#'));
    }
  });
})(app, app.module('authAuth'));

Answer 1

您是否在 var autoAuthView = new autoAuth.View; 行中遇到此错误？ 要创建 autoAuth.View 的新实例，您需要执行 var autoAuthView = new autoAuth.View();。

autoAuth.View 是类，要调用构造函数，并创建一个新实例，需要用() 调用它。