Durandal + Webpack: Part 2 - Composition

durandal.composition.js

//  Locates the view, realizes it, binds it to the parent binding context and composes it into the DOM node on which the binding is declared.
data-bind="compose: 'myView.html'"

// Uses RequireJS to get the shell module, locates the view conventionally, binds it and injects it into the DOM node on which the binding is declared.
data-bind="compose: 'shell'"

//  Evaluates the binding to obtain the result of someProperty. If it is a string, assume it's a view, otherwise assume it's a viewmodel, and follow the steps above
data-bind="compose: someProperty"  

getView.sample.js

var jQuery = require('jquery');
var viewEngine = require('durandal/viewEngine');

var ViewModel = {  
    getView: function() {
        var view = require('./view');
        return viewEngine.processMarkup(view);
    }
};

system.acquire.callback.js

function cb(err?: Error, module: Object|Function)

system.acquire.js

system.acquire = function(moduleId: String) {}

view.sample.html

<!-- Composes and binds the View HTML stored in the `myView` property into this view -->  
<div data-bind="compose: myView"></div>

<!-- Composes the ViewModel stored in the `myViewModel` property into this view -->  
<div data-bind="compose: myView"></div>  

viewLocator.locateView.js

viewLocator.locateView = function(  
    viewOrUrlOrId: String|DOMElement,
    area?: String,
    elementsToSearch?: DOMElement[]
) {}

viewModel.sample.js

var jQuery = require('jquery');
var viewEngine = require('durandal/viewEngine');

var ViewModel = {  
    myView: require('./myView.html'),
    myViewModel: require('./myViewModel'),

    getView: function() {
            var view = require('./view');
            return viewEngine.processMarkup(view);
    }
};

module.exports = ViewModel;