Render batman.js views into a modal

readme.md

Rendering Batman.js Views into Modal

This is a working example of using the Bootstrap modal with batman.js.

To render into a modal:

• Set up a data-yield='modal'.
• Observe Batman.DOM.Yield.get('yields.modal.contentView') for when a view is rendered. Open the modal inside that observer.
• Create a function on ApplicationController to close the dialog and die the view and add it as a beforeAction.
• For actions which should render into the modal, explicitly render: @render(into: 'modal'). The modal will be opened automatically by the observer.

For more batman.js recipes, see the Batman.js MVC Cookbook!

application.coffee

Batman.config.pathToApp = window.location.pathname

class @App extends Batman.App
  @root 'animals#index'

  @on 'run', ->
    @_observeModal()
    @_seedData()
    Batman.redirect("/")

  # Observe the modal yield and show the modal when something is in it.
  @_observeModal: ->
    Batman.DOM.Yield.observe 'yields.modal.contentView',  (newValue, oldValue) ->
      if newValue? # A view has been added!
        $('.modal').modal('show')

  # Just to make things interesting, make some Animals
  @_seedData: ->
    totalAnimals = App.Animal.get('all.length')
    if totalAnimals is 0
      for n in ["Hedgehog", "Starfish", "Echidna"]
        animal = new App.Animal(name: n)
        animal.save()

$ -> App.run()

class App.ApplicationController extends Batman.Controller
  closeDialog: ->
    $('.modal').modal('hide')
    modalYield = Batman.DOM.Yield.get('yields.modal')
    modalYield.get('contentView')?.die()
    modalYield.set('contentView', undefined)

  @beforeAction @::closeDialog

class App.AnimalsController extends App.ApplicationController
  routingKey: 'animals'

  index: (params) ->
    @set 'newAnimal', new App.Animal

  edit: (animal) ->
    @set 'currentAnimal', animal
    @render(into: 'modal')

class App.Animal extends Batman.Model
  @resourceName: 'animal'
  @persist Batman.LocalStorage
  @encode 'name'

class App.AnimalsIndexView extends Batman.View
  saveAnimal: (animal) ->
    animal.save (err, r) =>
      @set('newAnimal', new App.Animal)

  destroyAnimal: (animal) -> animal.destroy()

class App.AnimalsEditView extends Batman.View
  saveAnimal: (animal) ->
    animal.save ->
      Batman.redirect("/")

application.js

(function() {
  var __hasProp = {}.hasOwnProperty,
    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

  Batman.config.pathToApp = window.location.pathname;

  this.App = (function(_super) {
    __extends(App, _super);

    function App() {
      return App.__super__.constructor.apply(this, arguments);
    }

    App.root('animals#index');

    App.on('run', function() {
      this._observeModal();
      this._seedData();
      return Batman.redirect("/");
    });

    App._observeModal = function() {
      return Batman.DOM.Yield.observe('yields.modal.contentView', function(newValue, oldValue) {
        if (newValue != null) {
          return $('.modal').modal('show');
        }
      });
    };

    App._seedData = function() {
      var animal, n, totalAnimals, _i, _len, _ref, _results;
      totalAnimals = App.Animal.get('all.length');
      if (totalAnimals === 0) {
        _ref = ["Hedgehog", "Starfish", "Echidna"];
        _results = [];
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
          n = _ref[_i];
          animal = new App.Animal({
            name: n
          });
          _results.push(animal.save());
        }
        return _results;
      }
    };

    return App;

  })(Batman.App);

  $(function() {
    return App.run();
  });

  App.ApplicationController = (function(_super) {
    __extends(ApplicationController, _super);

    function ApplicationController() {
      return ApplicationController.__super__.constructor.apply(this, arguments);
    }

    ApplicationController.prototype.closeDialog = function() {
      var modalYield, _ref;
      $('.modal').modal('hide');
      modalYield = Batman.DOM.Yield.get('yields.modal');
      if ((_ref = modalYield.get('contentView')) != null) {
        _ref.die();
      }
      return modalYield.set('contentView', void 0);
    };

    ApplicationController.beforeAction(ApplicationController.prototype.closeDialog);

    return ApplicationController;

  })(Batman.Controller);

  App.AnimalsController = (function(_super) {
    __extends(AnimalsController, _super);

    function AnimalsController() {
      return AnimalsController.__super__.constructor.apply(this, arguments);
    }

    AnimalsController.prototype.routingKey = 'animals';

    AnimalsController.prototype.index = function(params) {
      return this.set('newAnimal', new App.Animal);
    };

    AnimalsController.prototype.edit = function(animal) {
      this.set('currentAnimal', animal);
      return this.render({
        into: 'modal'
      });
    };

    return AnimalsController;

  })(App.ApplicationController);

  App.Animal = (function(_super) {
    __extends(Animal, _super);

    function Animal() {
      return Animal.__super__.constructor.apply(this, arguments);
    }

    Animal.resourceName = 'animal';

    Animal.persist(Batman.LocalStorage);

    Animal.encode('name');

    return Animal;

  })(Batman.Model);

  App.AnimalsIndexView = (function(_super) {
    __extends(AnimalsIndexView, _super);

    function AnimalsIndexView() {
      return AnimalsIndexView.__super__.constructor.apply(this, arguments);
    }

    AnimalsIndexView.prototype.saveAnimal = function(animal) {
      return animal.save((function(_this) {
        return function(err, r) {
          return _this.set('newAnimal', new App.Animal);
        };
      })(this));
    };

    AnimalsIndexView.prototype.destroyAnimal = function(animal) {
      return animal.destroy();
    };

    return AnimalsIndexView;

  })(Batman.View);

  App.AnimalsEditView = (function(_super) {
    __extends(AnimalsEditView, _super);

    function AnimalsEditView() {
      return AnimalsEditView.__super__.constructor.apply(this, arguments);
    }

    AnimalsEditView.prototype.saveAnimal = function(animal) {
      return animal.save(function() {
        return Batman.redirect("/");
      });
    };

    return AnimalsEditView;

  })(Batman.View);

}).call(this);

Batman.View.store.set('/animals/edit', '<div class=\"modal-header\"><h2 data-bind=\"&quot;Edit &quot; | append currentAnimal.name\" class=\"modal-title\"></h2></div><div class=\"modal-body\"><form data-formfor-animal=\"currentAnimal\" data-event-submit=\"saveAnimal | withArguments currentAnimal\"><div class=\"form-group\"><label>Name</label><input type=\"text\" data-bind=\"animal.name\" class=\"form-control\"/></div><input type=\"submit\" value=\"Save\" class=\"btn btn-success\"/></form></div><div class=\"modal-footer\"><button data-event-click=\"closeDialog\" class=\"btn\">Close</button></div>');
Batman.View.store.set('/animals/index', '<div class=\"row\"><h1>All Animals<small data-bind=\"Animal.loaded.length | append &quot;)&quot; | prepend &quot; (&quot;\"></small></h1></div><ul class=\"list-unstyled\"><li data-foreach-animal=\"Animal.all\"><div class=\"row\"><div class=\"col-xs-3\"><p data-bind=\"animal.name\" class=\"lead\"></p></div><div class=\"col-xs-1\"><button data-event-click=\"controllers.animals.executeAction | withArguments &quot;edit&quot;, animal\" class=\"btn\">Edit</button></div><div class=\"col-xs-1\"><button data-event-click=\"destroyAnimal | withArguments animal\" class=\"btn btn-danger\">Destroy</button></div></div></li></ul><p class=\"row\"><div class=\"well\"><form data-formfor-animal=\"newAnimal\" data-event-submit=\"saveAnimal | withArguments newAnimal\"><div class=\"form-group\"><label>New Animal:</label><input type=\"text\" data-bind=\"animal.name\" class=\"form-control\"/></div><input type=\"submit\" value=\"Save\" class=\"btn btn-primary\"/></form></div></p>');

Gulpfile.js

var gulp = require('gulp');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var jade = require('gulp-jade');
var batmanTemplates = require("gulp-batman-templates")

gulp.task('default', function(){
  gulp.watch('./**/*', ["build", "html", "finalize"])
});

var appSources = ["./coffee/*.coffee"]

gulp.task("build", function(){
  gulp.src(appSources)
    .pipe(concat('application.coffee'))
    .pipe(coffee())
    .pipe(concat('app.js'))
    .pipe(gulp.dest("./build/"))

  gulp.src(appSources)
    .pipe(concat('./application.coffee'))
    .pipe(gulp.dest("./"))

})

gulp.task("html", function(){
  gulp.src(["./html/**/*.jade"])
    .pipe(jade())
    .pipe(batmanTemplates())
    .pipe(concat('templates.js'))
    .pipe(gulp.dest("./build/"))
})

gulp.task("finalize", function() {
  gulp.src(["./build/app.js", "./build/templates.js"])
    .pipe(concat("application.js"))
    .pipe(gulp.dest("./"))
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/batman.js/0.15.0/batman.min.js"></script>
    <link type="text/css" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
  </head>
  <body>
    <div class='container'>
      <div data-yield="main" class="row"></div>
    </div>
    <div class="modal">
      <div class="modal-dialog">
        <div data-yield="modal" class="modal-content"></div>
      </div>
    </div>
  </body>
  <script src="application.js"></script>
</html>