Skip to content

Instantly share code, notes, and snippets.



Created Sep 3, 2015
What would you like to do?
Example of master/detail in Durandal. From Durandal's HTML Samples download.
<h1>Master / Detail</h1>
<form class="form-inline" role="form">
<div class="form-group">
<label class="control-label">Project</label>
<div class="form-group">
<select class="form-control" data-bind="options: projects, optionsText: 'name', value: activeProject"></select>
<!--ko compose: activeProject--><!--/ko-->
define(['./project', 'durandal/activator', 'knockout'], function (Project, activator, ko) {
var projects = ko.observableArray([
new Project('Durandal', 'A cross-device, cross-platform application framework written in JavaScript, Durandal is a very small amount of code built on top of three existing and established Javascript libraries: jQuery, Knockout and RequireJS.'),
new Project('UnityDatabinding', 'A general databinding framework for Unity3D. Includes bindings for UI composition and samples for the NGUI library.'),
new Project('Caliburn.Micro', 'Caliburn.Micro is a small, yet powerful framework, designed for building applications across all Xaml Platforms. With strong support for MVVM and other proven UI patterns, Caliburn.Micro will enable you to build your solution quickly, without the need to sacrifice code quality or testability.')
return {
projects: projects,
activeProject: activator.create().forItems(projects)
<h3 data-bind="text: name"></h2>
<div data-bind="text: description"></div>
define(['durandal/system', 'durandal/app'], function(system, app) {
var ctor = function(name, description) { = name;
this.description = description;
ctor.prototype.canActivate = function () {
return app.showMessage('Do you want to view ' + + '?', 'Master Detail', ['Yes', 'No']);
ctor.prototype.activate = function() {
system.log('Model Activating', this);
ctor.prototype.canDeactivate = function () {
return app.showMessage('Do you want to leave ' + + '?', 'Master Detail', ['Yes', 'No']);
ctor.prototype.deactivate = function () {
system.log('Model Deactivating', this);
return ctor;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.