How you might do a subview for a child model property

parent-model.js

var Model = require('ampersand-model');


module.exports = Model.extend({
    props: {
        address: 'state'
    }
});

view.js

var View = require('ampersand-view');
var ViewSwitcher = require('ampersand-view-switcher');


module.exports = View.extend({
    template: '<div><div role="address"></div></div>',
    render: function () {
        this.renderWithTemplate();
        this.switcher = new ViewSwitcher(this.getByRole('address'));
        this.model.on('change:address', this.handleAddressChange, this);
        // run it manually too
        this.handleAddressChange();
    },
    handleAddressChange: function () {
        var self = this;
        // This could just as easily be done just by rendering a template
        // not entirely sure this actually needs to be this dynamic.
        // seems like an address doesn't really need to be bound???
        this.switcher.set(new AddressView({
            model: self.model.address
        }));
    }
});