Question

我有一个骨干应用程序，它有一个视图：

/**
* Event Handler for User
*
* date: 21-02-2014
* version: 0.1
*
*/
( function( $, $$, window, document, utilities ){

    // Extends my object from Backbone events
    window.UserHandler = Backbone.View.extend({

            events: {
                    'click .login-button': 'login'
                ,   'click .logout-button': 'logout'
                ,   'click .register-button': 'register'
            }

        ,   initialize: function(){

                _.bindAll(this, 'login', 'register', 'onLoginComplete', 'onRegisterComplete' );

                this.collection = new UserList();

                this.user = new UserModel();

                this.collection.bind('add', this.appendUser);

                console.log('view is initialized');

            }

        ,   login: function( e ){

                alert( 'hello' );

                var data = utilities.formToJson( '#login-form' )
                ,   required = [ 'username', 'password' ]
                ,   user = new UserModel()
                ,   errors = [];

                // Validate the fields
                utilities.validateEmptyFields( required, data, errors );

                if( errors.length > 0 ){

                    utilities.showNotification( 'error', 'Llena todos los campos para ingresar a tu cuenta', 0 );
                    return;
                }

                // Validate email format
                if( ! utilities.isEmail( data.username ) ){
                    utilities.showNotification( 'error', 'Escribe un email válido.', 0 );
                    return;
                }

                // shows the progress screen
                utilities.onProgress( 'Iniciando Sesión' );

                user.set( data );

                user.login( this.onLoginComplete );

            }

        ,   logout: function(){
                window.localStorage.removeItem( 'user' );
                window.location = 'index.html';
            }

        ,   onLoginComplete: function( data ){

                utilities.offProgress( 0 );

                if( data.status == 500 ){
                    utilities.showNotification( 'error', data.message, 4000 );
                    window.localStorage.removeItem( 'user' );
                    return;
                }

                // create a cookie session to save the user data
                var model = new UserModel()
                model.set( data.user );
                window.localStorage.setItem( 'user', JSON.stringify( model ) );
                window.location = 'panel-inicio.html';

            }

            /**
            * Register user
            *
            */
        ,   register: function(){

                var data = utilities.formToJson( '#login-form' )
                ,   required = [ 'username', 'password' ]
                ,   user = new UserModel()
                ,   errors = [];

                // Validate the fields
                utilities.validateEmptyFields( required, data, errors );

                if( errors.length > 0 ){

                    utilities.showNotification( 'error', 'Llena todos los campos para crear tu cuenta', 0 );
                    return;
                }

                // Validate email format
                if( ! utilities.isEmail( data.username ) ){
                    utilities.showNotification( 'error', 'Escribe un email válido.', 0 );
                    return;
                }

                // shows the progress screen
                utilities.onProgress( 'Registrando' );

                user.set( data );

                user.register( this.onRegisterComplete );
            }

        ,   onRegisterComplete: function( data ){

                utilities.offProgress( 0 );

                console.log(data);

                if( data.status == 500 ){
                    utilities.showNotification( 'error', data.message, 4000 );
                    window.localStorage.removeItem( 'user' );
                    return;
                }

                this.login();

            }


        ,   appendUser: function( user ){
                console.log( user.get( 'username' ) );
            }

    });

})( jQuery, Quo, this, this.document, this.Misc, undefined );

因此初始化函数永远不会被触发!!我究竟做错了什么？我是以错误的方式打电话或打扰观点吗？我有其他文件Model和Collection以及它们的初始化函数可以很好地工作。

脚本的顺序是：

<script type="text/javascript" src="assets/js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="assets/js/underscore-min.js"></script>
        <script type="text/javascript" src="assets/js/backbone-min.js"></script>
        <script type="text/javascript" src="assets/js/misc.js"></script>ç

        <!-- Backbone API -->
        <script type="text/javascript" src="assets/js/models/user.js"></script>
        <script type="text/javascript" src="assets/js/collections/user.js"></script>
        <script type="text/javascript" src="assets/js/events/user.js"></script>

Answer 1

你正在定义UserHandler“类”，但你永远不会创建它的实例。相反，您只需将类型分配给window.UserHandler。尝试：

window.UserHandler = new (Backbone.View.extend({...}));

更好的是，在定义UserHandler之后实例化视图：

var UserHandlerView = Backbone.View.extend....
var view = new UserHandlerView();

为了保持一致，大多数人会使用CapitalCamelCase表示类型（您可以调用new的内容，lowerCamelCase代表实例，基元等。

BackboneJS View初始化函数不是触发器

1 个答案: