Example of master/detail in Durandal. From Durandal's HTML Samples download.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | |
}; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
<h3 data-bind="text: name"></h2> | |
<div data-bind="text: description"></div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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