Ryan Hodson
Ryan Hodson has worked in a diverse collection of programming fields, building everything from websites to e-publishing platforms, touch-screen thermostats, and natural language processing tools. These experiences have led to a love of exploring new software and a proficiency in several languages and frameworks. In 2012, Ryan founded an independent publishing firm called RyPress and published his first book, Ry's Friendly Guide to Git. Since then, he has worked as a freelance technical writer for well-known software companies, including Syncfusion and Atlassian. Ryan continues to publish high-quality software tutorials via RyPress.com.
  • Code
    Animating KnockoutKnockoutjs
    Knockout.js is not an animation library. All of Knockout.js’ automatic updates are immediately applied whenever the underlying data changes. In order to animate any of its changes, we need to dig into Knockout.js’ internals and manually create animated transitions using another JavaScript framework like jQuery or MooTools. This lesson sticks with jQuery’s animation routines, but the concepts presented apply to other animation libraries as well.Read More…
  • Code
    Accessing External DataKnockoutjs
    For most web applications, collecting user input is relatively useless if you can’t pass that data along to a server. In this lesson, we’ll learn how to send and receive information from a server using AJAX requests. This puts the model back into the Model-View-ViewModel design pattern underpinning Knockout.js.Read More…
  • Code
    Interactive BindingsKnockoutjs
    Form elements are the conventional way to interact with users through a webpage. Working with forms in Knockout.js is much the same as working with appearance bindings. But, since users can edit form fields, Knockout.js manages updates in both directions. This means that interactive bindings are two-way. They can be set programmatically and the view will update accordingly, or they can be set by the view and read programmatically.Read More…
  • Code
    Appearance BindingsKnockoutjs
    In the previous lesson, we saw how Knockout.js’ control-flow bindings provide a basic templating system for view code. Control-flow bindings provide the visual structure for your application, but a full-fledged templating system needs more than just structure. Knockout.js’ appearance bindings give you precise control over the styles and formatting of individual elements.Read More…
  • Code
    Control-Flow BindingKnockoutjs
    As we’ve seen in previous lessons, designing a view for a ViewModel is like creating an HTML template for a JavaScript object. An integral part of any templating system is the ability to control the flow of template execution. The ability to loop through lists of data and include or exclude visual elements based on certain conditions makes it possible to minimize markup and gives you complete control over how your data is displayed.Read More…
  • Code
    Knockout ObservablesKnockoutjs
    We’ve seen how observable properties let Knockout.js automatically update HTML elements when underlying data changes, but this is only the beginning of their utility. Knockout.js also comes with two more ways of exposing ViewModel properties: computed observables and observable arrays. Together, these open up a whole new world of possibilities for data-driven user interfaces.Read More…
  • Code
    Hello, KnockoutKnockoutjs
    This lesson is designed to be a high-level survey of Knockout.js’ main components. By implementing a concrete sample application, we’ll see how Knockout’s ViewModel, view, observables, and bindings interact to create a dynamic user interface.Read More…
  • Code
    Conceptual OverviewKnockoutjs
    Knockout.js uses a Model-View-ViewModel (MVVM) design pattern, which is a variant of the classic Model-View-Controller (MVC) pattern. As in the MVC pattern, the model is your stored data, and the view is the visual representation of that data. But, instead of a controller, Knockout.js uses a ViewModel as the intermediary between the model and the view.Read More…
  • Code
    Knockout Succinctly IntroductionKnockoutjs
    Creating data-driven user interfaces is one of the most complex jobs of a web developer. It requires careful management between the interface and its underlying data. For example, consider a simple shopping-cart interface for an e-commerce website. When the user deletes an item from the shopping cart, you have to remove the item from the underlying data set, remove the associated element from the shopping cart’s HTML page, and update the total price. For all but the most trivial of applications, figuring out which HTML elements rely on a particular piece of data is an error-prone endeavor.Read More…