psobko

A few months ago I ripped through a number of MVVM JS frameworks while starting a new project and found Knockout.js to be exactly what I was looking for. I found their introductory tutorials to be an excellent place to start but also a bit of a poor reference since they have to be completed step by step. Below are my notes on the 5 knockout tutorials for eas(ier) reference.

Tutorial 1 – Introduction to Knockout/MVVM

View

<!-- This is a *view* - HTML markup that defines the appearance of your UI -->
//Data Binding (data-bind)
//This attribute is how KO lets you declartively assosciate your viewmodels with DOM elements.

//One of the most simple types of binding is text-binding:
First name: <strong data-bind="text: firstName">todo</strong>
Last name: <strong data-bind="text: lastName">todo</strong>
Full name: <strong data-bind="text: fullName"></strong>

//Many other types of binding are available such as value binding:
First name: <input type="text" data-bind="value: firstName" />
Last name: <input type="text" data-bind="value: lastName" />

//Or click binding:
<button data-bind="click: capitalizeLastName">Go caps</button>

//Data Binding (data-bind)

//This attribute is how KO lets you declartively assosciate your viewmodels with DOM elements.

//One of the most simple types of binding is text-binding:

First name: <strong data-bind="text: firstName">todo</strong>

Last name: <strong data-bind="text: lastName">todo</strong>

Full name: <strong data-bind="text: fullName"></strong>

//Many other types of binding are available such as value binding:

First name: <input type="text" data-bind="value: firstName" />

Last name: <input type="text" data-bind="value: lastName" />

//Or click binding:

View Model

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI

function AppViewModel() {
    this.species = "Human"; // declares a static string as a variable

//Observables (ko.observable)
//Changing the value in the above input boxes will change the viewmodel but the
//UI isn't changed since the viewmodel properties are just JS strings. Observables
//are properties that will notify KO when their value changes.

    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");

//Computed Values (ko.computed)
//Often you'll want access to observed values in other properties. For example
//to combine two strings, or add a number values together.

    this.fullName = ko.computed(function() { //using a callback function
        return this.firstName() + " " + this.lastName();    
    }, this);

//Behaviours
//Note: when accessing observed values, it must be called as a function.
    this.capitalizeLastName = function() {
            var currentVal = this.lastName();        // Read the current value
            this.lastName(currentVal.toUpperCase()); // Write a new value
        };
}
// Activates knockout.js and applies the bindings
ko.applyBindings(new AppViewModel());

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI

function AppViewModel() {

this.species = "Human"; // declares a static string as a variable

//Observables (ko.observable)

//Changing the value in the above input boxes will change the viewmodel but the

//UI isn't changed since the viewmodel properties are just JS strings. Observables

//are properties that will notify KO when their value changes.

this.firstName = ko.observable("Bert");

this.lastName = ko.observable("Bertington");

//Computed Values (ko.computed)

//Often you'll want access to observed values in other properties. For example

//to combine two strings, or add a number values together.

this.fullName = ko.computed(function() { //using a callback function

return this.firstName() + " " + this.lastName();

}, this);

//Behaviours

//Note: when accessing observed values, it must be called as a function.

this.capitalizeLastName = function() {

var currentVal = this.lastName(); // Read the current value

this.lastName(currentVal.toUpperCase()); // Write a new value

};

}

// Activates knockout.js and applies the bindings

ko.applyBindings(new AppViewModel());

2 -Lists and Collections

View

<h2>Your seat reservations</h2>

//Repeating Elements (foreach)
//Observable arrays and the foreach binding are used to create repeating
//UI elements. Other control flow bindings are if, ifnot, and with
<table>
    <thead><tr>
        <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
    </tr></thead>
    <tbody data-bind="foreach: seats">
        <tr>
            //Since meal is a ko.observable it must be invoked as a function
            //to obtain it's current value before reading its properties
            <td data-bind="text: name"></td>
            <td data-bind="text: meal().mealName"></td>
            <td data-bind="text: meal().price"></td>
        </tr>  
    </tbody>
    //Repeating Data
    //options and optionsText are bindings for controlling dropdown lists
    <tbody data-bind="foreach: seats">
    <tr>
        <td><input data-bind="value: name" /></td>
        <td><select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>
       //a new formattedPrice observed value is needed to format the amount
        <td data-bind="text: formattedPrice"></td>
    //Removing Data
    //"$ root." causes KO to look for removeSeat handler on top-level model
    //instead of SeatReservation instance it is bound to
        <td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>
    </tr>    
</tbody>
</table>
//Visibility (visible)
//This binding controls the visibility of an element using CSS display
//Arbitrary JS expressions can be used inside declerative bindings
<h3 data-bind="visible: totalSurcharge() > 0">
    Total surcharge: $<span data-bind="text: totalSurcharge().toFixed(2)"></span>
</h3>
//Adding a new element through the defined function does not refresh the dom
<button data-bind="click: addSeat">Reserve another seat</button>
//Displaying more information can be done easily
<h2>Your seat reservations (<span data-bind="text: seats().length"></span>)</h2>

<h2>Your seat reservations</h2>

//Repeating Elements (foreach)

//Observable arrays and the foreach binding are used to create repeating

//UI elements. Other control flow bindings are if, ifnot, and with

<table>

<th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>

</tr></thead>

<tr>

//Since meal is a ko.observable it must be invoked as a function

//to obtain it's current value before reading its properties

</tr>

</tbody>

//Repeating Data

//options and optionsText are bindings for controlling dropdown lists

<tr>

//a new formattedPrice observed value is needed to format the amount

//Removing Data

//"$ root." causes KO to look for removeSeat handler on top-level model

//instead of SeatReservation instance it is bound to

<td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>

</tr>

</tbody>

</table>

//Visibility (visible)

//This binding controls the visibility of an element using CSS display

//Arbitrary JS expressions can be used inside declerative bindings

Total surcharge: $<span data-bind="text: totalSurcharge().toFixed(2)"></span>

</h3>

//Adding a new element through the defined function does not refresh the dom

<button data-bind="click: addSeat">Reserve another seat</button>

//Displaying more information can be done easily

<h2>Your seat reservations (<span data-bind="text: seats().length"></span>)</h2>

View Model

// Class to represent a row in the seat reservations grid
// This is a simple constructor to store the properties
function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);

    //To create a computed property on the seat reservation class
    //ko.computed will be used
    self.formattedPrice = ko.computed(function() {
        var price = self.meal().price;
        return price ? "$" + price.toFixed(2) : "None";        
    });
}

// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
    var self = this;

    // Non-editable catalog data - would come from the server
    self.availableMeals = [
        { mealName: "Standard (sandwich)", price: 0 },
        { mealName: "Premium (lobster)", price: 34.95 },
        { mealName: "Ultimate (whole zebra)", price: 290 }
    ];    

    // Editable data - these are instances of seat reservation class
    // Note: this is a ko.observableArray
    self.seats = ko.observableArray([
        new SeatReservation("Steve", self.availableMeals[0]),
        new SeatReservation("Bert", self.availableMeals[0])
    ]);

    //surcharge
    //note seats and meal are both observables and have to be invoked
    //as functions
    self.totalSurcharge = ko.computed(function() {
   var total = 0;
   for (var i = 0; i < self.seats().length; i++)
       total += self.seats()[i].meal().price;
   return total;
    });

    // Operations
    self.addSeat = function() {
        self.seats.push(new SeatReservation("", self.availableMeals[0]));
        self.removeSeat = function(seat) { self.seats.remove(seat) }
    }
}

ko.applyBindings(new ReservationsViewModel());

// Class to represent a row in the seat reservations grid

// This is a simple constructor to store the properties

function SeatReservation(name, initialMeal) {

var self = this;

self.name = name;

self.meal = ko.observable(initialMeal);

//To create a computed property on the seat reservation class

//ko.computed will be used

self.formattedPrice = ko.computed(function() {

var price = self.meal().price;

return price ? "$" + price.toFixed(2) : "None";

});

}

// Overall viewmodel for this screen, along with initial state

function ReservationsViewModel() {

var self = this;

// Non-editable catalog data - would come from the server

self.availableMeals = [

{ mealName: "Standard (sandwich)", price: 0 },

{ mealName: "Premium (lobster)", price: 34.95 },

{ mealName: "Ultimate (whole zebra)", price: 290 }

];

// Editable data - these are instances of seat reservation class

// Note: this is a ko.observableArray

self.seats = ko.observableArray([

new SeatReservation("Steve", self.availableMeals[0]),

new SeatReservation("Bert", self.availableMeals[0])

]);

//surcharge

//note seats and meal are both observables and have to be invoked

//as functions

self.totalSurcharge = ko.computed(function() {

var total = 0;

for (var i = 0; i < self.seats().length; i++)

total += self.seats()[i].meal().price;

return total;

});

// Operations

self.addSeat = function() {

self.seats.push(new SeatReservation("", self.availableMeals[0]));

self.removeSeat = function(seat) { self.seats.remove(seat) }

}

ko.applyBindings(new ReservationsViewModel());

3- Single Page Applications

View

/*For hash-based navigation, the visitor's position in a virtual navigation space is stored in the URL hash, which is the part of the URL after a 'hash' symbol (e.g., /my/app/#category=shoes&page=4). Whenever the URL hash changes, the browser doesn't issue an HTTP request to fetch a new page; instead it merely adds the new URL to its back/forward history list and exposes the updated URL hash to scripts running in the page. The script notices the new URL hash and dynamically updates the UI to display the corresponding item (e.g., page 4 of the "shoes" category).

This makes it possible to support back/forward button navigation in a single page application (e.g., pressing 'back' moves to the previous URL hash), and effectively makes virtual locations bookmarkable and shareable.

pushState is an HTML5 API that offers a different way to change the current URL, and thereby insert new back/forward history entries, without triggering a page load. This differs from hash-based navigation in that you're not limited to updating the hash fragment — you can update the entire URL.*/

<!-- Modern applicaitons use hash-based or pushState navigation to 
support back/forward actions as well as bookmarking. Many libraries
exist for this, sammy.js is used in this tutorial-->

<script src="/scripts/lib/sammy.js" type="text/javascript"></script>
<!-- The technique here is to add an extra layer of indirection.
Originally goToFolder and goToMail functions triggered Ajax requests
and updated the viewmodel. Now these functions will only trigger client 
side navigation.
Sammy will detect the navigation and then make the requests and update
the state. This means that if navigation is triggered by the user without
using the UI, the app will still function correctly.-->


<!-- Folders 
//CSS binding is used to display active folder
//goToFolder is invoked when a folder is clocked
-->
<ul class="folders" data-bind="foreach: folders">
    <li data-bind="text: $data, 
               css: { selected: $data == $root.chosenFolderId() },
               click: $root.goToFolder"></li>
</ul>

<!-- Mails grid 
Binding Context (with)
"with" creates a binding context, binding elements inside it
everything inside the table will be bound to chosenFolderData
to chosenFolderData. prefix is not required -->
<table class="mails" data-bind="with: chosenFolderData">
    <thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead>
    <tbody data-bind="foreach: mails">
        <tr data-bind="click: $root.goToMail">
            <td data-bind="text: from"></td>
            <td data-bind="text: to"></td>
            <td data-bind="text: subject"></td>
            <td data-bind="text: date"></td>
        </tr>     
    </tbody>
</table>

<!-- Chosen mail -->
<div class="viewMail" data-bind="with: chosenMailData">
    <div class="mailInfo">
        <h1 data-bind="text: subject"></h1>
        <p><label>From</label>: <span data-bind="text: from"></span></p>
        <p><label>To</label>: <span data-bind="text: to"></span></p>
        <p><label>Date</label>: <span data-bind="text: date"></span></p>
    </div>
    //html binding allows linebreaks and html markup to be displayed
    <p class="message" data-bind="html: messageContent" />
</div>

/*For hash-based navigation, the visitor's position in a virtual navigation space is stored in the URL hash, which is the part of the URL after a 'hash' symbol (e.g., /my/app/#category=shoes&page=4). Whenever the URL hash changes, the browser doesn't issue an HTTP request to fetch a new page; instead it merely adds the new URL to its back/forward history list and exposes the updated URL hash to scripts running in the page. The script notices the new URL hash and dynamically updates the UI to display the corresponding item (e.g., page 4 of the "shoes" category).

This makes it possible to support back/forward button navigation in a single page application (e.g., pressing 'back' moves to the previous URL hash), and effectively makes virtual locations bookmarkable and shareable.

pushState is an HTML5 API that offers a different way to change the current URL, and thereby insert new back/forward history entries, without triggering a page load. This differs from hash-based navigation in that you're not limited to updating the hash fragment — you can update the entire URL.*/

<!-- Modern applicaitons use hash-based or pushState navigation to

support back/forward actions as well as bookmarking. Many libraries

exist for this, sammy.js is used in this tutorial-->

<!-- The technique here is to add an extra layer of indirection.

Originally goToFolder and goToMail functions triggered Ajax requests

and updated the viewmodel. Now these functions will only trigger client

side navigation.

Sammy will detect the navigation and then make the requests and update

the state. This means that if navigation is triggered by the user without

using the UI, the app will still function correctly.-->

<!-- Folders

//CSS binding is used to display active folder

//goToFolder is invoked when a folder is clocked

-->

<li data-bind="text: $data,

css: { selected: $data == $root.chosenFolderId() },

click: $root.goToFolder"></li>

</ul>

<!-- Mails grid

Binding Context (with)

"with" creates a binding context, binding elements inside it

everything inside the table will be bound to chosenFolderData

to chosenFolderData. prefix is not required -->

<thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead>

</tr>

</tbody>

</table>

</div>

//html binding allows linebreaks and html markup to be displayed

</div>

View Model

function WebmailViewModel() {
    // Data
    var self = this;
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
    self.chosenFolderId = ko.observable();
    //contains data for chosen folder
    self.chosenFolderData = ko.observable();
    //contains data for chosen mail item
    self.chosenMailData = ko.observable();

    // Behaviours - removed for url routing
//    self.goToFolder = function(folder) { 
//        self.chosenFolderId(folder);
        // Stop showing a mail
//        self.chosenMailData(null); 
        //Ajax request for data
//        $.get('/mail', { folder: folder }, self.chosenFolderData);
//    };

//    self.goToMail = function(mail) { 
//        self.chosenFolderId(mail.folder);
//        self.chosenFolderData(null); // Stop showing a folder
//        $.get("/mail", { mailId: mail.id }, self.chosenMailData);
//    };

    //functions only trigger navigation
    self.goToFolder = function(folder) { location.hash = folder };
    self.goToMail = function(mail) { location.hash = mail.folder + '/' + mail.id };

    // Client-side routes
    // Implements the same logic as the previous goTo functions
    Sammy(function() {
        this.get('#:folder', function() {
            self.chosenFolderId(this.params.folder);
            self.chosenMailData(null);
            $.get("/mail", { folder: this.params.folder }, self.chosenFolderData);
        });

        this.get('#:folder/:mailId', function() {
            self.chosenFolderId(this.params.folder);
            self.chosenFolderData(null);
            $.get("/mail", { mailId: this.params.mailId }, self.chosenMailData);
        });
        //go to inbox by default - runRoute: loads the inbox
        this.get('', function() { this.app.runRoute('get', '#Inbox') });
    }).run();

    // Show inbox by default - removed because it ignored routes
    //self.goToFolder('Inbox');
};

ko.applyBindings(new WebmailViewModel());

function WebmailViewModel() {

// Data

var self = this;

self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];

self.chosenFolderId = ko.observable();

//contains data for chosen folder

self.chosenFolderData = ko.observable();

//contains data for chosen mail item

self.chosenMailData = ko.observable();

// Behaviours - removed for url routing

// self.goToFolder = function(folder) {

// self.chosenFolderId(folder);

// Stop showing a mail

// self.chosenMailData(null);

//Ajax request for data

// $.get('/mail', { folder: folder }, self.chosenFolderData);

// };

// self.goToMail = function(mail) {

// self.chosenFolderId(mail.folder);

// self.chosenFolderData(null); // Stop showing a folder

// $.get("/mail", { mailId: mail.id }, self.chosenMailData);

// };

//functions only trigger navigation

self.goToFolder = function(folder) { location.hash = folder };

self.goToMail = function(mail) { location.hash = mail.folder + '/' + mail.id };

// Client-side routes

// Implements the same logic as the previous goTo functions

Sammy(function() {

this.get('#:folder', function() {

self.chosenFolderId(this.params.folder);

self.chosenMailData(null);

$.get("/mail", { folder: this.params.folder }, self.chosenFolderData);

});

this.get('#:folder/:mailId', function() {

self.chosenFolderId(this.params.folder);

self.chosenFolderData(null);

$.get("/mail", { mailId: this.params.mailId }, self.chosenMailData);

});

//go to inbox by default - runRoute: loads the inbox

this.get('', function() { this.app.runRoute('get', '#Inbox') });

}).run();

// Show inbox by default - removed because it ignored routes

//self.goToFolder('Inbox');

};

ko.applyBindings(new WebmailViewModel());

See also: http://jsfiddle.net/rniemeyer/PctJz/

4- Custom Bindings

View

//in KO bindings are intermediaries: viewmodel changes dom, dom events change viewmodel properties.
//custom bindings should be encapsulated for re-use

//Define a custom binding by assigning a new property to the ko.bindingHandlers object. Your property can expose two callback functions:

//init - called when the binding first happens (useful to set initial state or register event handlers)
//update -called whenever the associated data updates (so you can update the DOM to match)

<h3 data-bind="text: question"></h3>
<p>Please distribute <b data-bind="text: pointsBudget"></b> points between the following options.</p>

<table>
    <thead><tr><th>Option</th><th>Importance</th></tr></thead>
    <tbody data-bind="foreach: answers">
        <tr>
            <td data-bind="text: answerText"></td>
            <!--<td><select data-bind="options: [1,2,3,4,5], value: points"></select></td> // Replaced by stars-->
            <td data-bind="starRating: points"></td>
        </tr>    
    </tbody>
</table>

<h3 data-bind="fadeVisible: pointsUsed() > pointsBudget">You've used too many points! Please remove some.</h3>
<p>You've got <b data-bind="text: pointsBudget - pointsUsed()"></b> points left to use.</p>
<button data-bind="jqButton:{enable: pointsUsed() <= pointsBudget}, click: save">Finished</button>

//in KO bindings are intermediaries: viewmodel changes dom, dom events change viewmodel properties.

//custom bindings should be encapsulated for re-use

//Define a custom binding by assigning a new property to the ko.bindingHandlers object. Your property can expose two callback functions:

//init - called when the binding first happens (useful to set initial state or register event handlers)

//update -called whenever the associated data updates (so you can update the DOM to match)

<p>Please distribute <b data-bind="text: pointsBudget"></b> points between the following options.</p>

<table>

<thead><tr><th>Option</th><th>Importance</th></tr></thead>

<tr>

</tr>

</tbody>

</table>

<h3 data-bind="fadeVisible: pointsUsed() > pointsBudget">You've used too many points! Please remove some.</h3>

<p>You've got <b data-bind="text: pointsBudget - pointsUsed()"></b> points left to use.</p>

<button data-bind="jqButton:{enable: pointsUsed() <= pointsBudget}, click: save">Finished</button>

View Model

// Reusable bindings - ideally kept in a separate file

//New Custom Binding for Visibility
ko.bindingHandlers.fadeVisible = {
    init: function(element, valueAccessor) {
        // Start visible/invisible according to initial value
        // This prevents the element from initially fading on pageload
        var shouldDisplay = valueAccessor();
        $(element).toggle(shouldDisplay);
    },
    //update handler is given bound element + func to return assosciated data
    update: function(element, valueAccessor) {
        // On update, fade in/out
        var shouldDisplay = valueAccessor();
        shouldDisplay ? $(element).fadeIn() : $(element).fadeOut();
    } 
};

//Custom binding for jQuery UI button
ko.bindingHandlers.jqButton = {
    init: function(element) {
       $(element).button(); // Turns the element into a jQuery UI button
    },
    //By default jQuery UI buttns don't respond to HTML disabled state    
     update: function(element, valueAccessor) {
        var currentValue = valueAccessor();
        // Here we just update the "disabled" state, but you could update other properties too
        $(element).button("option", "disabled", currentValue.enable === false);
    }
};

//Custom Binding for Rating Stars
ko.bindingHandlers.starRating = {
    init: function(element, valueAccessor) {
        $(element).addClass("starRating");
        for (var i = 0; i < 5; i++)
           $("<span>").appendTo(element);
        // Pure jQuery code for handling hover state and obtaining value
         $("span", element).each(function(index) {
            $(this).hover(
                function() { $(this).prevAll().add(this).addClass("hoverChosen") }, 
                function() { $(this).prevAll().add(this).removeClass("hoverChosen") }                
            ).click(function() { 
               var observable = valueAccessor();  // Get the associated observable
               observable(index+1);               // Write the new rating to it
             });
        });
    },
    update: function(element, valueAccessor) {
        // Give the first x stars the "chosen" class, where x <= rating
        var observable = valueAccessor();
        $("span", element).each(function(index) {
            $(this).toggleClass("chosen", index < observable());
        });
    }

};

function Answer(text) { this.answerText = text; this.points = ko.observable(1); }

function SurveyViewModel(question, pointsBudget, answers) {
    this.question = question;
    this.pointsBudget = pointsBudget;
    this.answers = $.map(answers, function(text) { return new Answer(text) });
    this.save = function() { alert('To do') };
                       
    this.pointsUsed = ko.computed(function() {
        var total = 0;
        for (var i = 0; i < this.answers.length; i++)
            total += this.answers[i].points();
        return total;        
    }, this);
}

ko.applyBindings(new SurveyViewModel("Which factors affect your technology choices?", 10, [
   "Functionality, compatibility, pricing - all that boring stuff",
   "How often it is mentioned on Hacker News",    
   "Number of gradients/dropshadows on project homepage",        
   "Totally believable testimonials on project homepage"
]));

// Reusable bindings - ideally kept in a separate file

//New Custom Binding for Visibility

ko.bindingHandlers.fadeVisible = {

init: function(element, valueAccessor) {

// Start visible/invisible according to initial value

// This prevents the element from initially fading on pageload

var shouldDisplay = valueAccessor();

$(element).toggle(shouldDisplay);

//update handler is given bound element + func to return assosciated data

update: function(element, valueAccessor) {

// On update, fade in/out

var shouldDisplay = valueAccessor();

shouldDisplay ? $(element).fadeIn() : $(element).fadeOut();

}

};

//Custom binding for jQuery UI button

ko.bindingHandlers.jqButton = {

init: function(element) {

$(element).button(); // Turns the element into a jQuery UI button

//By default jQuery UI buttns don't respond to HTML disabled state

update: function(element, valueAccessor) {

var currentValue = valueAccessor();

// Here we just update the "disabled" state, but you could update other properties too

$(element).button("option", "disabled", currentValue.enable === false);

}

};

//Custom Binding for Rating Stars

ko.bindingHandlers.starRating = {

init: function(element, valueAccessor) {

$(element).addClass("starRating");

for (var i = 0; i < 5; i++)

$("<span>").appendTo(element);

// Pure jQuery code for handling hover state and obtaining value

$("span", element).each(function(index) {

$(this).hover(

function() { $(this).prevAll().add(this).addClass("hoverChosen") },

function() { $(this).prevAll().add(this).removeClass("hoverChosen") }

).click(function() {

var observable = valueAccessor(); // Get the associated observable

observable(index+1); // Write the new rating to it

});

update: function(element, valueAccessor) {

// Give the first x stars the "chosen" class, where x <= rating

var observable = valueAccessor();

$("span", element).each(function(index) {

$(this).toggleClass("chosen", index < observable());

});

}

};

function Answer(text) { this.answerText = text; this.points = ko.observable(1); }

function SurveyViewModel(question, pointsBudget, answers) {

this.question = question;

this.pointsBudget = pointsBudget;

this.answers = $.map(answers, function(text) { return new Answer(text) });

this.save = function() { alert('To do') };

this.pointsUsed = ko.computed(function() {

var total = 0;

for (var i = 0; i < this.answers.length; i++)

total += this.answers[i].points();

return total;

}, this);

}

ko.applyBindings(new SurveyViewModel("Which factors affect your technology choices?", 10, [

"Functionality, compatibility, pricing - all that boring stuff",

"How often it is mentioned on Hacker News",

"Number of gradients/dropshadows on project homepage",

"Totally believable testimonials on project homepage"

]));

See also: http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html

5 – Loading and saving Data

View

<h3>Tasks</h3>

<form data-bind="submit: addTask">
    Add task: <input data-bind="value: newTaskText" placeholder="What needs to be done?" />
    <button type="submit">Add</button>
</form>

<ul data-bind="foreach: tasks, visible: tasks().length > 0">
    <li>
        <input type="checkbox" data-bind="checked: isDone" />
        <input data-bind="value: title, disable: isDone" />
        <a href="#" data-bind="click: $parent.removeTask">Delete</a>
    </li> 
</ul>

You have <b data-bind="text: incompleteTasks().length"> </b> incomplete task(s)
<span data-bind="visible: incompleteTasks().length == 0"> - it's beer time!</span>

//JSON requests can be made back to the server, POSTing directly is easier
<form action="/tasks/saveform" method="post">
    <input type="text" name="tasks" data-bind="value: ko.toJSON(tasks)"></input>
    <button type="submit">Save</button>
</form>

//Sending model data using created save function
<button data-bind="click: save">Save</button>

<h3>Tasks</h3>

Add task: <input data-bind="value: newTaskText" placeholder="What needs to be done?" />

</form>

<li>

<a href="#" data-bind="click: $parent.removeTask">Delete</a>

</li>

</ul>

You have <b data-bind="text: incompleteTasks().length"> </b> incomplete task(s)

//JSON requests can be made back to the server, POSTing directly is easier

</form>

//Sending model data using created save function

View Model

    function Task(data) {
    this.title = ko.observable(data.title);
    this.isDone = ko.observable(data.isDone);
}

function TaskListViewModel() {
    // Data
    var self = this;
    self.tasks = ko.observableArray([]);
    self.newTaskText = ko.observable();
    self.incompleteTasks = ko.computed(function() {
        //return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() });
        //Extra filter needs to be added to not count destroyed tasks
        return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() && !task._destroy });
    });

    // Operations
    self.addTask = function() {
        self.tasks.push(new Task({ title: this.newTaskText() }));
        self.newTaskText("");
    };
    //Standard removal
    //self.removeTask = function(task) { self.tasks.remove(task) };

    //Destroy removal
    //Adds '_destroy' property to the task instance with a true value
    //foreach binding is aware of this and will no longer display the item
    self.removeTask = function(task) { self.tasks.destroy(task) };

      // Load initial state from server, convert it to Task instances, then populate self.tasks
      // $.getJSON gets remote JSON, $.map  constructs a task instance from each entry
    // Note: no need to re-bind after getting data, updating the view model is enough
    $.getJSON("/tasks", function(allData) {
        var mappedTasks = $.map(allData, function(item) { return new Task(item) });
        self.tasks(mappedTasks);
    });    

    // New save function for saving via a JSON request 
    // success hndler alerts server response
    self.save = function() {
        $.ajax("/tasks", {
            data: ko.toJSON({ tasks: self.tasks }),
            type: "post", contentType: "application/json",
            success: function(result) { alert(result) }
        });
    }; 
}

ko.applyBindings(new TaskListViewModel());

function Task(data) {

this.title = ko.observable(data.title);

this.isDone = ko.observable(data.isDone);

}

function TaskListViewModel() {

// Data

var self = this;

self.tasks = ko.observableArray([]);

self.newTaskText = ko.observable();

self.incompleteTasks = ko.computed(function() {

//return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() });

//Extra filter needs to be added to not count destroyed tasks

return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() && !task._destroy });

});

// Operations

self.addTask = function() {

self.tasks.push(new Task({ title: this.newTaskText() }));

self.newTaskText("");

};

//Standard removal

//self.removeTask = function(task) { self.tasks.remove(task) };

//Destroy removal

//Adds '_destroy' property to the task instance with a true value

//foreach binding is aware of this and will no longer display the item

self.removeTask = function(task) { self.tasks.destroy(task) };

// Load initial state from server, convert it to Task instances, then populate self.tasks

// $.getJSON gets remote JSON, $.map constructs a task instance from each entry

// Note: no need to re-bind after getting data, updating the view model is enough

$.getJSON("/tasks", function(allData) {

var mappedTasks = $.map(allData, function(item) { return new Task(item) });

self.tasks(mappedTasks);

});

// New save function for saving via a JSON request

// success hndler alerts server response

self.save = function() {

$.ajax("/tasks", {

data: ko.toJSON({ tasks: self.tasks }),

type: "post", contentType: "application/json",

success: function(result) { alert(result) }

});

};

}

ko.applyBindings(new TaskListViewModel());

Chrome comes fully loaded with some powerful dev tools, one of the most useful is probably the V8 JS debugger:

I REALLY wish that things could be a little different when debugging complex JS:

I keep getting emails from eBay about “Visionary Picks” and other junk I don’t care about. Usually unsubscribing from this type of stuff is fairly trivial but it seems eBay is almost as sneaky as LinkedIn when it comes to unsubscribing:

Well Gmail to the rescue! Apparently this feature was implemented in 2009 but I haven’t really noticed it till recently. It doesn’t work on all emails, but I’m pretty impressed that it can unsubscribe me without having to log into eBay. The last thing I need right now is more ALIEN merch.

Note: This is an expansion on a comment I made on a Reddit thread a few weeks ago. People like it so I hope you find it useful aswell.

Subnote: This is a post about PHP/JS/CSS/HTML.

Currently I’m lead dev working on a codebase for a website that’s about 12 years old. It has a few thousand source files and sparse documentation. Legacy code is awesome! Not every project is the same but here’s the type of stuff you might find:

You have no clue what the dependencies are or how things interact
Naming conventions aren’t the same across the board
Error handling is same as above
You have “current” best practices or just strange things going on (tables, in-line styling, <br><br><br> – basically the lack of a front-end dude since the idea of that 10 years ago wasn’t that huge)
Commments of all sorts: cryptic messages, old code, lines left over from debugging

Some people might cringe but it’s actually quite fun! Anyone can write code and many people can design intelligent software; it takes a true hacker to be able to sort through a complex legacy system and work within it. It is a big challenge but the reward of this kind of undertaking is immense.

Best Practices

Develop a style guide for code and follow it for any new additions. Update older code stylistically as you work on it. Don’t worry about how much of your time gets devoted to pressing [tab] and [enter] – or reindent if you have that option.
Develop a general code-structure if you possible based on what the common consensus is so far (even if it’s not perfect). Try to enforce it wherever you can. I make templates for each type of file to speed things up in the future.

Comment everything as you come across it. Now by that I mean comment functions and files ONLY. I like the JavaDoc style personally, each file has description/@author/@version/@package and each function has description/@param/@return. Remove in-line comments where possible. This is how all of my files start:

/**
 * Random Function
 * 
 * In case the function name isn't semantic or is 
 * complex, here's some more info.
 *
 * @author  psobko
 * @package New API
 * @version 1.0
 * @param   string	The xxx string being passed.
 * @return  array	The corresponding yyy and zzz.
 */

/**

* Random Function

* In case the function name isn't semantic or is

* complex, here's some more info.

* @author psobko

* @package New API

* @version 1.0

* @param string The xxx string being passed.

* @return array The corresponding yyy and zzz.

I’m not going to get much deeper into commenting because that’s a whole post on it’s own, basically just keep it clean and simple and don’t write more than you have to.

Create logic diagrams for overly complicated processes. I spent a day tracing how an order is processed from being an item in the session to going through the billing system and getting created via various APIs, turns out the process was MUCH more complicated than I had originally anticipated but having a visual map of it makes it both easier to work with and easier for others to understand.
DONT REWRITE ANYTHING UNLESS YOU HAVE A THOROUGH KNOWLEDGE OF IT’S INTERACTION WITH THE ENTIRE SYSTEM.
Working with inline styles can be a bit of a pain. It’s always challenging because the elements you’re styling can be split up among a number of different files and presented in a number of different contexts. I completely revamped the CSS on one websites by using StyleDocco (Kalei is also a decent option). The tool itself isn’t that powerful, but forcing yourself to go through the code and find how elements are being coded and styled is invaluable. Once you have everything laid out you can get a good idea of what your class requirements are and start grouping like items together. As a bonus you also create HTML standards from the usage examples you find. This type of documentation is also a great way to make notes about how various items could be improved in your next major revision. (Note: the ability to let you search the entire project source and display how code is being used is crucial – CLI or preferably your IDE).
Ultimately always think of the future, you may not be there for more than six months so leave things in a way that your team or your eventual replacement will have an easier time. Don’t be lazy and don’t let the laziness of others rub off on you.

Now I don’t consider myself an expert by any means. I’ve been in the industry for 8 years and every project/environment/team is different. This is just how I like to do things. Also if you haven’t read it, this book may change your life (and probably gave me alot of inspiration for this post).

Keep things sane, semantic and fun

Omegle is a weird place. Mostly I think it’s a hangout for perverts (during 4-6am anyway). Thinking about it, I guess the signal/noise ratio is about on par for anything else you’d find on the net. Lately a combination of insomnia and boredom have led to many hours wasted on this website. This is a post about missed connections and talking with strangers.

Abstraction, specifically in terms of human-computer interaction, is a very intriguing topic. I’m not going to rant about how awesome it is to have access to the limitless amounts of UX data we have today. I will talk about one metric though, ASL. I don’t know about other chat systems but on Omegle the standard “A/S/L” greeting has devolved to just “S”. Most of the conversations I get into go like this:

Stranger: M

Stranger: You?

Usually these are followed by a prompt disconnect shortly after my gender is disclosed. I’m curious to see where we’ll be in 10 years.

Anyway last night I met Sierra, apparently she’s 24 and she used to live in Toronto but now she lives in NYC. If you’re from Omegle let me phrase that in a way you can understand:

24/f/nyc

I didn’t learn that much about her, she mostly asked me questions about my life and how I waste most of my time. She told me that saying I’m a lanky pale gingerkid isn’t the best way to pick up ladies. No shit Anyway the connection we made was quite awesome, all I remember was that she volunteered alot and was in some medical related field (physio….?). Mostly I liked the fact she was a real human and not an ASL robot like the previous 10 matches. We talked about exchanging pictures but decided it wasn’t really relevant, we did exchange contact info though. Well, we tried.

She gave me her KIK username shortly before I managed to finally fall asleep. I probably should have wrote it down or put it into my phone; I figured leaving the chat open in my browser would be safe enough. Well it turned out that even though my Macbook, which was connected to the charger, which was connected to the powerbar, which (believe it or not) was connected to the power outlet, wasn’t actually connected to any power at all. That little orange powerswitch? Yep, that was flicked off.

I’ll probably never talk to Sierra again so here’s an open letter:

Dear 24/f/nyc,

Whether that’s your real age, sex, and location I do not know or care. You’re pretty cool but you need to work on your sleep patterns. Enjoy your life and if you ever move back to Toronto I hope you’re on Reddit.

@psobko

Footnote: As I was writing this I opened up a new Omegle chat to get a screenshot of the interface. At first the person seemed AFK so I was quite relieved to avoid the guilt of starting a conversation I didn’t really want to have. They ended up typing and we had a very meta conversation about these types of missed connections. Ironically enough I tried to do a -c to copy something from the window, as fate would have it my finger hit the “W”. Life is funny.

Re-indent is an absolute necessity in any text editor; why this isn’t shortcutted by default in Sublime2 is beyond me. To make your coding experience much more enjoyable I’d set this shortcut right off the bat, maybe even before installing Package Control (shocking I know).

A quick rundown on how to set this up:

Preferences > Key Bindings – User

And then after making sure you’re not overriding something important, set up the shortcut:

{ "keys": ["ctrl+i"], "command": "reindent"},

1	{ "keys": ["ctrl+i"], "command": "reindent"},

Apple Protip: key == “super”

Incase you don’t know what re-indent does, it turns:

<table class="table-condensed table-bordered table-striped">
<thead>
<tr>
<th colspan="7" >
 <a class="btn"><i class="icon-chevron-left"></i></a>
  <a class="btn">February 2012</a>
	<a class="btn"><i class="icon-chevron-right"></i></a>
</th>
</tr>
    <tr>
<th>Su</th>
<th>Mo</th>
<th>Tu</th>
    <th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
</tr>
</thead>
<tbody>

<thead>

<tr>

<a class="btn">February 2012</a>

</th>

</tr>

<tr>

</tr>

</thead>

<tbody>

into:

<table class="table-condensed table-bordered table-striped">
	<thead>
		<tr>
			<th colspan="7" >
				<a class="btn"><i class="icon-chevron-left"></i></a>
				<a class="btn">February 2012</a>
				<a class="btn"><i class="icon-chevron-right"></i></a>
			</th>
		</tr>
		<tr>
			<th>Su</th>
			<th>Mo</th>
			<th>Tu</th>
			<th>We</th>
			<th>Th</th>
			<th>Fr</th>
			<th>Sa</th>
		</tr>
	</thead>
	<tbody>

<thead>

<tr>

<a class="btn">February 2012</a>

</th>

</tr>

<tr>

</tr>

</thead>

<tbody>

Clean clode, clean mind.

So maybe this already exists, maybe it doesn’t. Unless I’m missing something big, it’s not a default option in most of the IDEs/editors I use. By default when selecting a string, whether it’s a variable/class/whatever you’ll have a segment of the string selected only if it’s been segmented by dashes. This means that double-clicking on a piece of a string such as say:

Will select this:

Which is awesome if you’re using a language/coding style that uses these kinds of strings as names. Things start to suck when you’re using underscores though, as far as I know it’s only possible to select the entire string. This is a bit of a waste of time since now instead of selecting a much needed segment you’ll get something like this:

What I want is selective selection: have the entire string selected by default or if a certain key is pressed then just select a segment. This would mean double clicking on like so:

This doesn’t apply to just underscores either, I’d want to see this feature for camelCase as well:

And in case your’re wondering why this is would be useful:

quickly renaming incorrect typeahead completions (NSMutableString ->NString)
qickly remaming strings (span4 -> span8)
quickly replacing multiple segments when doing things like copying methods
quickly copying segments that need to be used elsewhere (setActiveSession -> activeSession)
… and many more scenarios that don’t immediately come to mind.

I’d want to test drive something like this in Sublime2 if I gave plugin development a second chance (Urg Python). If there’s anything like this out already then by all means please let me know.

edit: so many typos!

I feel like I’ve neglected this place a little lately so…. Redesign

Happy New Year!

Edit: Damn I didn’t get a before.

So the iPhone 5 is out and iOS 6.0 gives us some really handy tools for supporting both the older 3″ screens and the new 4″ screen through something called Autolayout. With iOS 6.0 at only about 60% adoption (pretty amazing considering it’s only been about a month) that leaves alot of older devices which don’t support this new option. Here’s my workaround to support the iPhone 5 on iOS 5.1.

First off select the older SDK in your build targets.

Then make sure to disable autolayout. You can do this by selecting the storyboard and disabling the option in the file inspector:

The last step is to add a new iPhone 5 launch image. You can save this blank image as a base or create a new one. It should be 640 × 1136 pixels and named Default-568h@2x.png

With these 3 things taken care of your iOS 5.1 app will now be able to run full screen on the iPhone 5. Obviously you may need to go inside and tweak how things are positioned depending on how your views are setup.

Seems like Google is having some parsing issues with it’s new horizontal options bar for image searches:

Knockout.JS Notes

Chrome: Please Do This

Ebay’s Sneaky Unsubscribe Tactics

Legacy Code: My Approach

Best Practices

Dear Sierra 24/F/NYC – An homage to Omegle and Powerbars

How I Learned to Stop Worrying and Shortcut Reindent in Sublime Text 2

Better Segmented Text Selection

Happy New Years 2013

iPhone 5 Support Using iOS 5.1 SDK

Google Image Search Has Bugs

About Me

Recent Posts

Blogroll

Weapons of Choice

Toolbox

Projects

Best Practices

About Me

Recent Posts

Tags

Blogroll

Weapons of Choice

Toolbox

Projects