ko.postbox example

by Asle Gundersby

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="#self" 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 id="users" data-bind="visible: visible">
        <h3>Users page</h3>
        <label class="checkbox">
            <input type="checkbox" data-bind="checked: sendNewsLetter" /> Send Newsletter?
        </label>
       <!-- the following works -->
        <p data-bind="with: selectedProject"> 
            Select delegates for project:  <span data-bind="text:title"></span>
       </p>
       <select data-bind="options:Users,optionsText: 'name', value: selectedUser"></select>
        
        <hr />
        <ul data-bind="foreach: Users"><li data-bind="text: name"></li></ul>
    </div>
    
    
    
    <div id="projects" data-bind="visible: visible">
        <h3>Projects page</h3>
        <label class="checkbox">
            <input type="checkbox"...

JavaScript

var MenuModel = function() {
        var preselected = "Profile";
        this.name = ko.observable().subscribeTo("nickName");
        this.sections = ["Profile", "Notifications","Users","Projects"];
        this.selectedSection = ko.observable(preselected).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).syncWith("sendNewsLetter");
};
var User = function(data){
    var self = this;
    
    self.ID = data.ID;
    self.name = ko.observable(data.name);
};
var UserModel = function(){
    this.visible = ko.observable(false);
    
    ko.postbox.subscribe("section",function(newValue) {
        this.visible(newValue === "Users");
    }, this);
    
    this.sendNewsLetter = ko.observable(false).syncWith("sendNewsLetter");
    
    // projects
    this.Projects = ko.observableArray().syncWith("myProjects");
    this.selectedProject = ko.observable().syncWith("selectedProjects");
    
    // users
    this.Users = ko.observableArray().syncWith("myUsers");
   ...