// require() some stuff from npm (like you were using browserify)
// and then hit Run Code to run it on the right
const State = require('ampersand-state')
const View  = require('ampersand-view')
const app   = require('ampersand-app')

const state = State.extend({
  session: {
    userName: 'string'
  }
})

const view = View.extend({
  template: '<div>Welcome! <span data-hook="userName"></span></div>',
  autoRender: true,

  bindings: {
    'app.state.userName' : {
      hook: 'userName',
      type: 'text'
    }
  }
})

app.extend({
  initialize: function() {
    const hook = document.querySelector('#body')

    this.state = new state()
    this.view  = new view({
      el: hook
    })
  }
})

window.app = app // debug access
app.initialize() // start app

// This should set the username, which should update the
// binding on the view. However, it does not. The value
// is updated, but the binding is not triggered.
//
setTimeout(function() {
  console.debug('Before:', app.state.userName)
  app.state.userName = 'Joe'
  console.debug('After:', app.state.userName)
}, 300)