Durandal "Hello World" Example
From Durandal's HTML Samples download. Shows all of the viewmodel event handlers.
index.html
<section> <h1 data-bind="text: displayName"></h1> <form class="form-inline" role="form"> <div class="form-group"> <input type="text" class="form-control" placeholder="name" data-bind="value: name, valueUpdate: 'afterkeydown'"> </div> <button type="submit" class="btn btn-default" data-bind="click: sayHello, enable: canSayHello">Click Me</button> </form> </section>
index.js
define(['durandal/app', 'durandal/system', 'knockout'], function (app, system, ko) { var name = ko.observable(); var canSayHello = ko.computed(function () { return name() ? true : false; }); return { displayName: 'What is your name?', name: name, sayHello: function() { app.showMessage('Hello ' + name() + '!', 'Greetings'); }, canSayHello: canSayHello, activate: function() { system.log('Lifecycle : activate : hello'); }, binding: function () { system.log('Lifecycle : binding : hello'); return { cacheViews:false }; //cancels view caching for this module, allowing the triggering of the detached callback }, bindingComplete: function () { system.log('Lifecycle : bindingComplete : hello'); }, attached: function (view, parent) { system.log('Lifecycle : attached : hello'); }, compositionComplete: function (view) { system.log('Lifecycle : compositionComplete : hello'); }, detached: function (view) { system.log('Lifecycle : detached : hello'); } }; });