Name chooser

name-chooser.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="button-dance.js"></script>
<div id="button-dance"/>

name-chooser.js

function model() {
  var self = {
    name: '',
    displayShowNameChooser: true,
    displayNameChooser: false,
    displayName: false,
    showNameChooserSelected: function() { 
      self.displayShowNameChooser = false; 
      self.displayNameChooser = true;
      self.onChange();
    },
    chooseName: function(name) {
      self.name = name;
      self.displayNameChooser = false;
      self.displayName = true;
      self.onChange();
    },
    onChange: function() { /* abstract */ }
  };
  return self;
}

function view(dom, model) {
  var self = {
    modelChanged: function() {
      dom.empty();
      model.displayShowNameChooser && dom.append(showNameChooser());
      model.displayNameChooser && dom.append(nameChooser());
      model.displayName && dom.append(name());
    },
    onSelectShowNameChooser: function() { /* abstract */ },
    onSelectChooseName: function() { /* abstract */ }
  };

  function showNameChooser() {
    return $('<input type="submit" value="show name chooser"/>')
      .click(function(event) {
        self.onSelectShowNameChooser();
        event.preventDefault();
      });
  }

  function nameChooser() {
    var chooser = $('<span>').append('Choose a name: ');
    var name = $('<input type="text"/>').appendTo(chooser);
    $('<input type="submit" value="choose"/>')
      .click(function(event) {
        self.onSelectChooseName(name.val());
        event.preventDefault}();
      )
      .appendTo(chooser);
    return chooser;
  }

  function name() {
    return $('<p>').text(model.name);
  }

  return self;
}

function controller(dom) {
  var m = model();
  var v = view(dom, m);
  v.onSelectShowNameChooser = m.showNameChooserSelected;
  v.onSelectChooseName = m.chooseName;
  m.onChange = v.modelChanged;
  v.modelChanged();
}

$(function() {
  controller($('#button-dance'));
});