Knockoutjs.com - Hello World Example

http://knockoutjs.com/examples/helloWorld.html

by Barry Carter

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="title-header left" data-bind="text: titleText"></div>
<div class="key">Key: <span class="fa fa-user"></span> User In Team</div>
<div style="clear:both"></div>
<div class='liveExample'>
  <div class="col-collapsed">
    <div class="col-collapsed-wrap" data-bind="visible: shouldShowPanels, click: $root.clearCampFilter_click">
        <i class="fa fa-arrow-circle-left"></i>
        <div class="vertical-text reset">Reset</div>
    </div>
    <div class="col-collapsed-wrap" data-bind="visible: shouldShowCampReset, click: $root.goToCampTeam_click">
        <i class="fa fa-arrow-circle-left"></i>
        <div class="vertical-text camp-reset">Camps -> Team</div>
    </div>
  </div>
  <div class="col">
      <div class="header" data-bind="text: $root.headerText(0)"></div>
      <div data-bind="foreach: $root.col1">
          <div class="row-item" data-bind="css: { 'row-selected': $root.isEntitySelected($data), 'row-selected-master': $root.isMasterEntitySelected($data)}, click: $root.col1_click">
              <div class="left" data-bind="text: name"></div>
              <div class="btn btn-ass fa fa-user" data-bind="visible: $root.isMatchedToEntity($data)"></div>
          </div>
      </div>
  </div>
  
  <div class="col">
  <div class="header" data-bind="text: $root.headerText(1)"></div>
      <div data-bind="foreach: $root.col2">
          <div class="row-item" data-bind="css: { 'row-selected': $root.isEntitySelected($data) }, click: $root.col2_click">
              <div class="left" data-bind="text: name"></div>
              <div class="btn btn-remove fa fa-minus-circle" data-bind="click: $root.remove_click, clickBubble: false, visible: $root.shouldShowPanels"></div>
      ...

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #E0E0E0; border: 1px solid #CCC; max-width: 1655px; height: 700px; color: #414141; }

.col-collapsed {
  width: 50px;
  float: left;
  border: 1px solid #9c9b9b;
  height: 100%;
  position: relative;
}

.col-collapsed-wrap {
  height: 50%;
  border-top: 1px solid #9c9b9b;
  border-bottom: 1px solid #9c9b9b;
  cursor: pointer;
  background-color: #f0f0f0;
}

.col-collapsed-wrap:hover {
  background-color: lightgray;
}

.col-collapsed i {
  color: green;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  margin-left: 14px;
}

.reset {
  margin-left: 33px;
  position: relative;
  top: 46%;
}

.camp-reset {
  margin-left: 33px;
  position: relative;
  top: 46%;
  width:200px;
}

.col {
  width: 200px;
  float: left;
  margin-left: 5px;
  height: 100%;
  border: 1px solid #d7d7d7;
  padding: 5px;
  background-color: white;
  color: #414141;
}

.vertical-text {
	transform: rotate(90deg);
	transform-origin: left top 0;
}

.left {
  float: left;
}

.col .row-item {
  height: 30px;
  font-size: 1.3em;
  padding: 2px;
}


.col .row-item:hover {
  background-color: #d7d7d7;  
}

.row-selected {
  background-color: lightgreen;
}

.row-selected-master {
  background-color: #80a9e7;
}

.row-selected-ass {
  background-color: orange;
}

.btn {
  float: right;
  width: 20px;
  height: 20px;
  font-size: 1.2em;
}

.btn.btn-add {
    color: green;
}

.btn.btn-remove {
    color: red;
}

.btn-ass {
  color: lightgreen;  
}

.header {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 10px;
  border-bottom: 2px solid #414141;
}

.field {
  display: inline-block;
  width: 100px;
  font-weight: bold;
  margin-bottom: 5px;
}


.editor-col {
  padding: 9px;
  height: 100%;
  float: left;
  width: auto;
}

.editor-col h1 {
  font-size: 2em;
  margin-bottom: 20px;
}

.title-header {
  font-size: 1.8em;
  margin-bottom: 5px;
}

.key {
  float: right;
 ...

JavaScript

// Here's my data model
var ViewModel = function(camps, teams, users) {
		var self = this;
    
    this.editorModel = ko.observable();
    
		this.ocamps = ko.mapping.fromJS(camps);
    this.oteams = ko.mapping.fromJS(teams);
    this.ousers = ko.mapping.fromJS(users);
  
    this.selectedEntity = ko.observable();
    this.selectedType = ko.observable();
    this.primaryType = ko.observable();
    
    this.col1 = ko.pureComputed(function() {
    		if (!self.selectedEntity()) {
        		return self.ocamps();
        }
        
        if (self.selectedType() == "camp")
        		return self.ocamps();
        else if (self.selectedType() == "team")
        		return self.oteams();
        else if (self.selectedType() == "user")
        		return self.oteams();
        
        return self.ocamps();
    });
    
    this.col2 = ko.pureComputed(function() {
    		if (!self.selectedEntity()) {
        		return self.oteams();
        }
        
        if (self.selectedType() == "camp")
        		return self.teamsForFilter(0);
        else if (self.selectedType() == "team")
        		return self.usersForFilter(0);
        
        return self.oteams();
    });
    
    this.col3 = ko.pureComputed(function() {
    if (!self.selectedEntity()) {
        		return self.ousers();
        }
        
        if (self.selectedType() == "camp")
        		return self.teamsForFilter(1);
        else if (self.selectedType() == "team")
        		return self.usersForFilter(1);

    		return self.ousers();
    });
    
    // 0 in camp, 1 not in camp
    this.teamsForFilter = function(mode) {
    		if(!self.selectedEntity()) {
        		if (mode == 0) // teams in camp
            		return self.oteams(); // return them all when nothing selected
            else
            		return []; // return nothing
        } else {
            return ko.utils.arrayFilter(self.oteams(), function(team) {
            		if (mode == 0) { // teams in camp
                		return team.campId() ==...