Skip to content

Instantly share code, notes, and snippets.

@jbnv
Created September 3, 2015 21:01
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jbnv/d3a2dd960d4dc01610b4 to your computer and use it in GitHub Desktop.
Example of master/detail in Durandal. From Durandal's HTML Samples download.
<section>
<h1>Master / Detail</h1>
<form class="form-inline" role="form">
<div class="form-group">
<label class="control-label">Project</label>
</div>
<div class="form-group">
<select class="form-control" data-bind="options: projects, optionsText: 'name', value: activeProject"></select>
</div>
</form>
<!--ko compose: activeProject--><!--/ko-->
</section>
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)
};
});
<div>
<h3 data-bind="text: name"></h2>
<div data-bind="text: description"></div>
</div>
define(['durandal/system', 'durandal/app'], function(system, app) {
var ctor = function(name, description) {
this.name = name;
this.description = description;
};
ctor.prototype.canActivate = function () {
return app.showMessage('Do you want to view ' + this.name + '?', '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 ' + this.name + '?', '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