Skip to content

Instantly share code, notes, and snippets.

@jbnv
Last active September 3, 2015 20:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jbnv/b04aa26e02e8b1585214 to your computer and use it in GitHub Desktop.
Save jbnv/b04aa26e02e8b1585214 to your computer and use it in GitHub Desktop.
Example of publish and subscribe in Durandal. From Durandal's HTML Samples download.
<section>
<div class="col-md-6" data-bind="compose: publisher"></div>
<div class="col-md-6" data-bind="compose: subscriber"></div>
</section>
define(['./publisher', './subscriber'], function (publisher, subscriber) {
return {
publisher:publisher,
subscriber: subscriber
};
});
<div>
<h1>Publisher</h1>
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="message" data-bind="value: message, valueUpdate: 'afterkeydown'">
</div>
<button type="submit" class="btn btn-default" data-bind="click: publish, enable: canPublish">Publish</button>
</form>
</div>
define(['durandal/app', 'knockout'], function (app, ko) {
var message = ko.observable();
var canPublish = ko.computed(function () {
return message() ? true : false;
});
return {
message: message,
canPublish:canPublish,
publish: function () {
app.trigger('sample:event', message());
}
};
});
<div>
<h1>
Subscriber
<button class="btn btn-success" data-bind="enable: !subscription(), click: subscribe">Subscribe</button>
<button class="btn btn-danger" data-bind="enable: subscription, click: unsubscribe">Unsubscribe</button>
</h1>
<ul data-bind="foreach: received">
<li data-bind="text: $data"></li>
</ul>
</div>
define(['durandal/app', 'knockout'], function (app, ko) {
return {
received: ko.observableArray([]),
subscription:ko.observable(),
subscribe: function () {
var sub = app.on('sample:event').then(function(message) {
this.received.push(message);
}, this);
this.subscription(sub);
},
unsubscribe: function () {
this.subscription().off();
this.subscription(null);
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment