Live Coding

LiveCoding.js

index.phtml

require(['singlePage/app'], function (app) {
    app.loadView('index')
});

singelPage/app.js

define(['jquery', 'knockout'], function ($, ko) {

    var currentView;
    var events = $({});

    var loadView = function(viewId, param) {

        unloadCurrentView();

        currentView = $('#' + viewId + '_view');
        var viewModelName = currentView.data('viewModel');
        
        if (viewModelName) {

            require(['app/' + viewModelName], function(ViewModelConstructor) {

                var model = new ViewModelConstructor(param);
                ko.applyBindings(model, currentView.get(0));
                currentView.show();

                model.loadData(function() {
                    $.refreshPage();
                });
            });
        }
    };

    var unloadCurrentView = function () {
                    
        if (currentView) {
            currentView.hide();

            ko.cleanNode(currentView.get(0));
            currentView.unbind();
            currentView = undefined;
        }
    };

    return {
        loadView: loadView
    };
});
    
IndexPageViewModel.js

define(['knockout', 'jquery', 'knockout.mapping'], function (ko, $, mapping) {

    var IndexPageViewModel = function() {

        var self = this;
        
        this.header = ko.observable("test");
        this.createNote = function() { alert("test"); };
        this.notes = ko.observableArray();
        this.loadData = function() {

            $.ajax("/api/note").done(function(xhr) {
                self.notes = mapping.fromJS(xhr, {}, self.notes);
                // doof!
                $.refreshPage();
            });
        };
    };

    return IndexPageViewModel;
});