Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #37506

Re: A very small MVC prototype, for real this time... but need help... of course

Show all headers | View raw

On Friday, October 4, 2019 at 11:43:28 PM UTC-5, luserdroog wrote:
> Upon rereading the helpful suggestions from Michael Haufe, I noticed this
> link which I had missed before,
> 
>   https://gist.github.com/mlhaufe/c841b2269b0099c3c52648717f9551cc
> 
> containing the very Model, View, and Controller classes in a short and
> sweet, barebones implementation. I read through it, copied it by hand
> into my notebook, and then retyped the handwritten copy to really get
> a good sense of it all. So, I'd like to try to build up a very simple
> usage example. 
> 
> Suppose for simplicity that the model is just represented by a simple 
> integer and the only modifications are increment and decrement.
> 
> I want the page to display the current value and have clickable plus
> and minus signs, buttons or divs or whatever.
> 
[snip]

I think I have it worked out a little better. The model has the function
'setValue' which calls the Model class's 'notify' function.

The view modifies the DOM in response to an 'update' from the model.

The controller has functions named to match DOM element classes and
a single click handler function routes all click events to their 
respective controller functions.

> 
> $ for f in eg.html app.js mvc.js; do echo ----- $f ------ ; cat $f ; done ;
> ----- eg.html ------

<!doctype html>
<html lang=en><meta charset=utf-8>
<script type=module src=app.js> </script>
<main>
  <div class=turtle >?</div>
  <div class=plus   >+</div>
  <div class=minus  >-</div>

> ----- app.js ------

let qs = (sel,ctx)=> (ctx || document).querySelector( sel );
import {Model, View, Controller} from './mvc.js';

function main(){
  turtle.setValue( 0 );
}


var turtle = new Model();
turtle.setValue = function( value ){ this.value = value; this.notify() };
turtle.inc = function(){ this.setValue( this.value + 1 ) };
turtle.dec = function(){ this.setValue( this.value - 1 ) };

var panel = new View();
panel.setModel( turtle );
panel.update = function(){ qs('.turtle').innerHTML = this.getModel().value; }

var control = panel.getController();
control.plus  = function(){ this.getModel().inc() }
control.minus = function(){ this.getModel().dec() }


function click( e ){
  if( typeof( control[ e.target.className ] ) == 'function' )
    control[ e.target.className ]()
}

document.addEventListener('DOMContentLoaded', main );
document.addEventListener('click', click );



> ----- mvc.js ------
> class Model {
>   _observers = []
>   observe( observer ){ this._observers.push( observer ) }
>   unobserve(observer){ this._observers=this._observers.filter(o=> o!==observer)}
>   notify( data ){ this._observers.forEach(o=> o.update(data) ) } }
> 
> class View {
>   _subViews = []
>   update(){}
>   getModel(){ return this._model }
>   setModel( model ){ this._setModelAndController( model, this._controller ) }
>   getDefaultController(){ return new Controller }
>   getController(){ if( !this._controller )
>                      this.setController(this.getDefaultController())
>                    return this._controller}
>   setController(controller){this._setModelAndController(this._model,controller)}
>   _setModelAndController( model, controller ){
>     if( this._model !== model ){
>       if( this._model ) this._model.unobserve( this )
>       if( model ) model.observe( this )
>       this._model = model
>     }
>     if( controller ){ controller.setView( this ); controller.setModel( model ) }
>     this._controller = controller
>   }
>   getSubViews(){ return new Array( this._subViews ) }
>   addSubView( subView ){
>     var prev = subView.getSuperView()
>     if( prev ) prev.removeSubView( subView )
>     this._subViews.push( subView )
>     subView.setSuperView( this )
>   }
>   removeSubView( subView ){
>     this._subViews=this._subViews.filter(s=>{if(s===subView) s.setSuperView(null)
>                                                return s !== subView })
>   }
>   setSuperView( superView ){ this._superView = superView }
>   getSuperView(){ return this._superView }
>   destroy(){
>     if( this._model ) this._model.unobserve( this )
>     this._subViews.forEach(s=> s.destroy() )
>   } }
> 
> class Controller {
>   getModel(){ return this._model }
>   setModel( model ){ this._model = model }
>   getView(){ return this._view }
>   setView( view ){ this._view = view } }
> 
> export { Model, View, Controller }

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

A very small MVC prototype, for real this time... but need help... of course luserdroog <luser.droog@gmail.com> - 2019-10-04 21:43 -0700
  Re: A very small MVC prototype, for real this time... but need help... of course luserdroog <luser.droog@gmail.com> - 2019-10-05 12:52 -0700
    Re: A very small MVC prototype, for real this time... but need help... of course "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-10-05 22:52 +0200
      Re: A very small MVC prototype, for real this time... but need help... of course luserdroog <luser.droog@gmail.com> - 2019-10-05 23:26 -0700
        Re: A very small MVC prototype, for real this time... but need help... of course "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-10-06 11:39 +0200
          Re: A very small MVC prototype, for real this time... but need help... of course Silvio <silvio@internet.com> - 2019-10-06 16:42 +0200
          Re: A very small MVC prototype, for real this time... but need help... of course luserdroog <luser.droog@gmail.com> - 2019-10-06 11:22 -0700
            Re: A very small MVC prototype, for real this time... but need help... of course "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-10-06 22:25 +0200
              Re: A very small MVC prototype, for real this time... but need help... of course Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-10-06 14:15 -0700
              Re: A very small MVC prototype, for real this time... but need help... of course luserdroog <luser.droog@gmail.com> - 2019-10-06 14:25 -0700
              Re: A very small MVC prototype, for real this time... but need help... of course luserdroog <luser.droog@gmail.com> - 2019-10-12 14:15 -0700
                Re: A very small MVC prototype, for real this time... but need help... of course "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-10-12 23:53 +0200
  Re: A very small MVC prototype, for real this time... but need help... of course luserdroog <luser.droog@gmail.com> - 2019-10-05 23:38 -0700

csiph-web