febbweiss.github.io/demo/filebrowser-durandal-widget/app/widgets/filebrowser/viewmodel.js

define(['durandal/app', 'durandal/composition', 'plugins/http',
        'jquery', 'knockout', 'knockout.mapping',
        'perfect.scrollbar',
        './renameModal', './newItemModal'],
        function(app, composition,http, $, ko, ko_mapping, perfectScrollbar, RenameModal, NewItemModal) {

	ko.mapping = ko_mapping;
	
	ko.bindingHandlers['let'] = {
	    'init': function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
	        // Make a modified binding context, with extra properties, and apply it to descendant elements
	        var innerContext = bindingContext.extend(valueAccessor());
	        ko.applyBindingsToDescendants(innerContext, element);
	
	        return { controlsDescendantBindings: true };
	    }
	};
	ko.virtualElements.allowedBindings['let'] = true;
    
    var ctor = function() {},
        selected = ko.observable(),
        showContextMenu = ko.observable(),
        copied = ko.observable(undefined),
        folder = ko.observable(ko.mapping.fromJS({children: []})),
        scrollable = $('#filebrowser');

	ctor.prototype.attached = function() {
     showContextMenu(false);
		$('#filebrowser').perfectScrollbar();
	};
	
    ctor.prototype.activate = function(settings) {
        this.settings = settings;
		this.selected = selected;
		this.folder = folder;
		this.showContextMenu = showContextMenu;
      this.hasSelectedFolder = ko.computed(function() {
        return selected() != undefined && selected().type === 'folder';
      });
      this.hasCopied = ko.computed( function() {
        return copied() !== undefined;
      });
    };

    ctor.prototype.open = function(object,event) {
    	console.log('Opening', object);
    	if( object.type() === 'folder' ) {
	        var id = object.uuid(),
	        	checkbox = $('input[type=checkbox][id=' + id + ']');
	        	
	        checkbox.prop('checked', !checkbox.prop('checked'));
	        $('#icon_folder_' + id).toggleClass('fa-folder-o').toggleClass('fa-folder-open-o');
	        
	        $('#filebrowser').perfectScrollbar('update');
		} else {
 			var type = object.extra();
	        http.get(object.path()).then(function(response) {
		        app.trigger('filebrowser:open_file', {
		        	type: type,
		        	content: response
		        });
		   });
		}
    };
    
    ctor.prototype.select = function(object, event) {
        $('li > span.select').removeClass('select');
        $(event.target).toggleClass('select');
        selected( ko.mapping.fromJS(object) );
    };
    
    /** Context Menu **/

    ctor.prototype.openContextMenu = function(object, event) {
        // Position du menu, calculer la pos pour eviter sortie du viewport
        var posX = event.pageX,
            posY = event.pageY,
            windowWidth = $(window).width(),
            windowHeight = $(window).height(),
            contextMenu = $('#fileBrowserContextMenu'),
            menuWidth = contextMenu.width(),
            menuHeight = contextMenu.height();

			posX = Math.min(posX, windowWidth - menuWidth - 15);
			posY = Math.min(posY, windowHeight - menuHeight - 10);

        // affichage
        contextMenu.css({
            left : posX + 'px',
            top : posY + 'px'
        });

      
       showContextMenu(true);
    };
	
    ctor.prototype.openRenamePopup = function(ctor, event) {
        RenameModal.show(ctor.selected().name()).then(function(response) {
            if( response !== undefined ) {
                ctor.selected().name(response);
            }
        });
    };

    ctor.prototype.openDeletePopup = function(ctor, event) {
        app.showMessage(
            'Are you sure you want to delete this ' +
                (ctor.selected().is_folder ? ' folder and all its content' : 'file') + '?',
            'Delete ' + ctor.selected().name(), [ { text: "Yes", value: "yes" }, { text: "No", value: "no" }]).then( function( dialogResult ) {
                if( dialogResult === 'yes' ) {
                    console.log('Deleting', ctor.selected().name());
                }
            });
    };

    ctor.prototype.copy = function(ctor, event) {
        console.log('Copied', ctor.selected().name());
        copied( ctor.selected() );
    };

    ctor.prototype.paste = function(ctor, event) {
        if( copied() !== undefined ) {
            console.log('Paste', copied().name(), 'into', ctor.selected().name());
            copied( undefined );
        }
    };

    ctor.prototype.newItem = function(ctor, event) {
        NewItemModal.show().then(function(response) {
            if( response !== undefined ) {
                console.log('New item : ' + response.type + ' - ' + response.name );
            }
        });
    };

   $(document).on('click', function() {
        showContextMenu(false);
    });
    /** End of Context Menu */

  	http.get('/data/filesystem.json').then(function(response) {
        folder(ko.mapping.fromJS(response));
        $('#filebrowser').perfectScrollbar('update');
   });

    return ctor;
});