https://github.com/codeparty/racer/issues/165

home.html

<Body:>
  <div class="jumbotron">
    <h1>Hello world!</h1>
    <p>Click the buttons in varying order and follow the console...</p>
    <p><button class="btn" x-bind="click:assign1">set _page.user.section[1] = 'hello 1'</button></p>
    <p><button class="btn" x-bind="click:assign2">set _page.user.section['abc'] = 'hello 2'</button></p>
  </div>

index.js

var app = require('derby').createApp(module)
  .use(require('derby-ui-boot'))
  .use(require('../../ui'))


// ROUTES //

// Derby routes are rendered on the client and the server
app.get('/', function(page, model) {
  // This value is set on the server in the `createUserId` middleware
  var userId = model.get('_session.userId');

  // Create a scoped model, which sets the base path for all model methods
  var user = model.at('users.' + userId);
  console.log('user = ' + userId)

  // Get the inital data and subscribe to any updates
  model.subscribe(user, function(err) {
    if (err) return next(err);
    console.log('user.get');
    console.log(user.get());

    // Create references that can be used in templates or controller methods
    model.ref('_page.user', user);
    page.render('home');
  });
});


// CONTROLLER FUNCTIONS //

app.fn('assign1', function(e, el) {
  console.log(this.model.get("_page.user"));
  this.model.set("_page.user.section.1", "hello 1")
  console.log(this.model.get("_page.user"));
});

app.fn('assign2', function(e, el) {
  console.log(this.model.get("_page.user"));
  this.model.set("_page.user.section.abc", "hello 2")
  console.log(this.model.get("_page.user"));
});