ko.postbox example

by Doug Hill

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="https://rawgit.com/rniemeyer/knockout-postbox/master/build/knockout-postbox.js"></script>
<div class="container">
    <div id="menu">
        <h2><span data-bind="text: name"></span>'s Settings</h2>
        <ul class="nav nav-pills" data-bind="foreach: sections">
            <li data-bind="css: { active: $root.selectedSection() === $data }">
                <a href="#" data-bind="text: $data, click: $root.selectedSection"></a>
            </li>
        </ul>
    </div>

    <div id="profile" data-bind="visible: visible">
        <h3>Profile</h3>
        <label>Nick name: <input id="nick" data-bind="value: nickName" /> </label>
        <label>Email: <input data-bind="value: emailAddress" /></label>
    </div>

    <div id="notifications" data-bind="visible: visible">
        <h3>Notifications</h3>
        <label>Email: <input data-bind="value: emailAddress" /></label>
        <label class="checkbox">
            <input type="checkbox" data-bind="checked: sendNewsLetter" /> Send Newsletter?
        </label>
    </div>
</div>

JavaScript

var MenuModel = function() {
    this.name = ko.observable().subscribeTo("nickName");
    this.sections = ["Profile", "Notifications"];
    this.selectedSection = ko.observable().publishOn("section");
};

var ProfileModel = function() {
    //publish updates to the nick name
    this.nickName = ko.observable("Ryan").publishOn("nickName");

    //apply a filter to turn the value that we receive into a boolean
    this.visible = ko.observable().subscribeTo("section", function(newValue) {
        return newValue === "Profile";
    });

    //subscribe and publish on the "email" topic to keep this observable in sync between view models
    this.emailAddress = ko.observable("[email protected]").syncWith("email");
};

var NotificationsModel = function() {
    this.visible = ko.observable(false);
    //as an alternative, use a direct subscription on the topic to update the observable
    ko.postbox.subscribe("section", function(newValue) {
        this.visible(newValue === "Notifications");
    }, this);

    //subscribe and publish on the "email" topic to keep this observable in sync between view models
    this.emailAddress = ko.observable("[email protected]").syncWith("email");

    this.sendNewsLetter = ko.observable(false);
};

//three independent view models, that have no direct references to each other
ko.applyBindings(new MenuModel(), document.getElementById("menu"));
ko.applyBindings(new ProfileModel(), document.getElementById("profile"));
ko.applyBindings(new NotificationsModel(), document.getElementById("notifications"));