gilbert

var animateHeight = {
  oncreate: function (vnode) {
    var height = vnode.dom.clientHeight
    vnode.dom.style.maxHeight = 0
    vnode.dom.offsetHeight // Trick to recalc layout
    window.requestAnimationFrame( ()=>  (vnode.dom.style.maxHeight = height+1+"px") )
  },
  onbeforeremove: function (vnode, done) {
    vnode.dom.addEventListener('transitionend', done)
    vnode.dom.style.maxHeight = 0

gilbert

// m.prop is a great pattern, but Plain-old JavaScript Objects (POJO) are
// much more pleasant to work with.
// Here's an example of using POJOs with one- and two-way data binding.

// First, the helper methods
m.setValue = function (obj, prop) {
  return m.withAttr('value', function(value) { obj[prop] = value })
}

gilbert

Exercise 1.1

Draw a diagram of the result of following code.

var businessName = "Trader Joe's";
var location     = "Austin";

Exercise 1.2

gilbert

Widget = {
  controller: function () {
    this.css = Widget.stylesheet().classes
  },
  view: function (ctrl) {
    return m('.widget', [
      m('h3', { class: ctrl.css.head }),
      m('div', { class: ctrl.css.body })
    ])
  },

gilbert

Step 1: Create the cheatsheet. 

gilbert

// Taken from http://loading.io/
uiload {
  display: inline-block;
  position: relative;
  & > div {
    position: relative;
  }
}

@-webkit-keyframes ajax-loader {

gilbert

window.Coupon = {}

Coupon.controller = function (attrs) {
  var ctrl = this
  ctrl.code = ""

  ctrl.submit = function (e) {
    e.preventDefault()
    ctrl.error = null

gilbert

@mixin li-hover {
  background: #3875d7;
  color: #fff;
}

.autocomplete-input--select-drop {
  background: white;
  border: 1px solid #aaa;
  margin-top: -1px;
  position: absolute;

gilbert

m.deferred.resolve = function (value) {
  var deferred = m.deferred()
  deferred.resolve(value)
  return deferred.promise
}

m.deferred.reject = function (value) {
  var deferred = m.deferred()
  deferred.reject(value)
  return deferred.promise

gilbert

(function (global) {

  global.getProp = function (propName) {
    return function (obj) { return obj[propName] }
  }

  global.queryProp = function (query) {
    var segments = query.split('.')
    return function (obj) {
      var result = obj