Backbone View State

view.html

<div class="js-ui-content"></div>

<script id="my-template" type="text/html">
    <% if (!data.state.hasConfirmed) { %>
        Display name? <button class="js-ui-confirm">Yes</button>
    <% } else { %>
        Hello <%= data.model.name %>!
    <% } %>        
</script>

view.js

var MyView = Marionette.ItemView.extend({
    el: $('.js-ui-content'),
    template: '#my-template',
    events: {
        'click .js-ui-confirm': 'setHasConfirmedToTrue'
    },
    initialize: function () {
        this.state = new Backbone.Model({hasConfirmed: false});
        this.listenTo(this.state, "change", this.render);
        this.listenTo(this.model, "change", this.render);
    },
    
    serializeData: function () {
        return {
            variable: 'data',
            data: {
                model: this.model.toJSON(),
                state: this.state.toJSON()
            }
        };
    },
    
    setHasConfirmedToTrue: function (e) {
        e.preventDefault();
        this.state.set({hasConfirmed: true})
    } 
});


view = new MyView({model: new Backbone.Model({name: 'World'})});
view.render();