(पुरालेख) मातृेशका.जेएस - वंशानुक्रम

 <form class="login-form"> <input type="text" class="user-name" placeholder="Username"> <input type="password" class="password" placeholder="Password"> <label> <input type="checkbox" class="show-password"> Show Password </label> <input type="submit" value="Sign In" class="submit"> <label> <input type="checkbox" placeholder="Password" class="remember-me"> Remember me </label> </form> 

 var LoginForm = Class( ... ); 

 var LoginForm = Class({ 'extends': MK }); 

 var LoginForm = Class({ 'extends': MK, constructor: function() { this.initMK(); //     ""  } }); 

  ... bindings: function() { return this //      (.  (1)) // ,     ,  .innerHTML   ,       //  ,               .bindNode( this, '.login-form' ) //        (on, getValue, setValue), //       .bindNode({ userName: this.$( '.user-name' ), // ,      'keyup' password: this.$( '.password' ), // ,      'keyup' showPassword: this.$( '.show-password' ), // ,     'click' rememberMe: this.$( '.remember-me' ), // ,     'click' }) .bindNode( 'isValid', this.$( '.submit' ), { //   (.  (2)) setValue: function( v ) { $( this ).toggleClass( 'disabled', !v ); } }) ; }, ... 

 this.bindNode( this, '.login-form' ); 

 this.bindNode( '__this__', '.login-form' ); 

 .bindNode( 'isValid', this.$( '.submit' ), { setValue: function( v ) { $( this ).toggleClass( 'disabled', !v ); } }) 

 .bindNode( 'isValid', this.$( '.submit' ), MK.binders.className( '!disabled' ) ) 

  ( ) [].1() [].2() ... [].N()    ( ) 

  ... constructor: function() { this .initMK() .bindings() //       .initMK() ; }, ... 

  ... events: function() { this.boundAll().on( 'submit', function( evt ) { //     (.  (1)) this.login(); evt.preventDefault(); }.bind( this ) ); //     (.  (2)) return this //      "showPassword" (.  (3)) .on( 'change:showPassword', function() { this.bound( 'password' ).type = this.showPassword ? 'text' : 'password'; }, true ) //      "userName"  "password" (.  (4)) .on( 'change:userName change:password', function() { this.isValid = this.userName.length >= 4 && this.password.length >= 5; }, true ) ; }, ... 

 this.boundAll().on( 'submit', function() { ... }.bind( this ) ); 

 this.boundAll( 'key' ).on( 'click', function() { ... }.bind( this ) ); 

 this.on( 'submit::__this__', function() { ... }); this.on( 'click::key', function() { ... }); 

  ... constructor: function() { this .initMK() .bindings() .events() ; }, ... 

  ... login: function() { var data; if( this.isValid ) { data = { userName: this.userName, password: this.password, rememberMe: this.rememberMe }; alert( JSON.stringify( data ) ); } return this; } ... 

 var loginForm = new LoginForm(); 

 var LoginForm = Class({ 'extends': MK, rememberMe: true, constructor: function() { this .initMK() .bindings() .events() ; }, bindings: function() { return this .bindNode( this, '.login-form' ) .bindNode({ userName: this.$( '.user-name' ), password: this.$( '.password' ), showPassword: this.$( '.show-password' ), rememberMe: this.$( '.remember-me' ) }) .bindNode( 'isValid', this.$( '.submit' ), { setValue: function( v ) { $( this ).toggleClass( 'disabled', !v ); } }) ; }, events: function() { this.boundAll().on( 'submit', function( evt ) { this.login(); evt.preventDefault(); }.bind( this ) ); return this .on( 'change:showPassword', function() { this.bound( 'password' ).type = this.showPassword ? 'text' : 'password'; }, true ) .on( 'change:userName change:password', function() { this.isValid = this.userName.length >= 4 && this.password.length >= 5; }, true ) ; }, login: function() { var data; if( this.isValid ) { data = { userName: this.userName, password: this.password, rememberMe: this.rememberMe }; alert( JSON.stringify( data ) ); } return this; } }); var loginForm = new LoginForm(); 

निष्कर्ष में

आगे क्या है?

 data = { userName: this.userName, password: this.password, rememberMe: this.rememberMe };