addressalign-toparrow-leftarrow-rightbackbellblockcalendarcameraccwcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-checkcircle-with-crosscircle-with-pluscontroller-playcrossdots-three-verticaleditemptyheartexporteye-with-lineeyefacebookfolderfullheartglobegmailgooglegroupshelp-with-circleimageimagesinstagramFill 1light-bulblinklocation-pinm-swarmSearchmailmessagesminusmoremuplabelShape 3 + Rectangle 1ShapeoutlookpersonJoin Group on CardStartprice-ribbonprintShapeShapeShapeShapeImported LayersImported LayersImported Layersshieldstartickettrashtriangle-downtriangle-uptwitteruserwarningyahoo

KnockoutJS: Simplify JavaScript UIs with the Model-View-ViewModel­ (MVVM) pattern

  • Dec 6, 2012 · 7:00 PM
  • WPI

Try it out:
http://knockoutjs.com/examples/helloWorld.html

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


Enhance what you have done with jQuery

Everyone loves jQuery! It’s an outstanding replacement for the clunky, inconsistent DOM API we had to put up with in the past. jQuery is an excellent low-level way to manipulate elements and event handlers in a web page.

As soon as your UI gets nontrivial and has a few overlapping behaviors, things can get tricky and expensive to maintain if you only use jQuery. Consider an example: you’re displaying a list of items, stating the number of items in that list, and want to enable an ‘Add’ button only when there are fewer than 5 items. jQuery doesn’t have a concept of an underlying data model, so to get the number of items you have to infer it from the number of TRs in a table or the number of DIVs with a certain CSS class. Maybe the number of items is displayed in some SPAN, and you have to remember to update that SPAN’s text when the user adds an item. You also must remember to disable the ‘Add’ button when the number of TRs is 5. Later, you’re asked also to implement a ‘Delete’ button and you have to figure out which DOM elements to change whenever it’s clicked.

How is Knockout different?

It’s much easier with KO. It lets you scale up in complexity without fear of introducing inconsistencies. Just represent your items as a JavaScript array, and then use a foreach binding to transform this array into a TABLE or set of DIVs. Whenever the array changes, the UI changes to match (you don’t have to figure out how to inject new TRs or where to inject them). The rest of the UI stays in sync. For example, you can declaratively bind a SPAN to display the number of items as follows:


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

Join or login to comment.

  • Matt D.

    John did a great job of showing knockout js. Thank you John for giving your time and expertise.

    December 9, 2012

  • Chuck M.

    Enjoyed comparison with backbone. Inspiring post meeting conversations. Friendly crowd great location.

    December 7, 2012

  • Joe B.

    A nice introduction to something I did not know about.

    December 7, 2012

  • A former member
    A former member

    great introduction to knockout. bit short

    December 7, 2012

  • Ronald R.

    John gave a great presentation. Thanks for sharing your knowledge and your patience!

    December 7, 2012

  • don s.

    very good , coudl be a little longer , more indepth

    December 7, 2012

    • John R.

      Thanks for coming out last night and for the feedback. We will aim to get the room for two hours in the future.

      December 7, 2012

  • John R.

    We will be in the Campus Center building where we often are. We will be in the Chairmans Room on the lower level. http://www.wpi.edu/Admin/CC/Floorplans/37680.htm

    December 5, 2012

    • Patrick G.

      Thanks, I was running late and found the campus but was not sure where to park. I now know where the building is but was wondering where people park. I parked on the street about 5 blocks away. Looking forward to future meetings as you have some great topics. I am interested in node.js and other topics.

      December 7, 2012

    • Patrick G.

      Please suggest some good Java meetups. I will drive to Boston if necessary. I am especially interested in hearing about Scala, Lift and other frameworks. I support web services written in Java using Spring and need to upgrade my UI skillset.

      December 7, 2012

  • John R.

    We will have 5 pizzas from Blue Jeans tonight.

    December 6, 2012

  • John R.

    We had to turn of RSVP at this point since we are at capacity for the room we have. The room seats 24 and we have 30 that have RSVP's as attending.

    December 5, 2012

  • John R.

    For this Meetup, we have the Chairman room at WPI which can seat 24 people.

    November 27, 2012

12 went

Our Sponsors

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy