Knockout 2.0.0 released

Knockout is an MVVM library for JavaScript – it makes rich dynamic web UIs easier and cleaner to build. The best place to start learning is with the interactive tutorials.

• The finished 2.0.0 build is now on GitHub
• All of the documentation and live examples are updated to reflect the new version
• All of the interactive tutorials are updated too.
• A 20-minute demo video

Html JavaScript Development using MVVM

Shawn Wildermuth talks about using KnockoutJS framework to develop a MVVM application:

KnockoutJS is a framework that allows me to use HTML-based data binding markup to describe my UI, CSS to describe what the design looks like and JavaScript to tie the data to the data binding. The is chiefly accomplished through the concept of observable objects. For example, I created a new JavaScript ‘class’ called gameModel in my view.js by creating members using the observable method on the knockout (e.g. ko) object:

// view.js
$(document).ready(function () {

  function gameModel() {
    this.name = ko.observable();
    this.id = ko.observable();
    this.genre = ko.observable(); this.releaseDate = ko.observable();
    this.price = ko.observable();
    this.imageUrl = ko.observable();
  };
  …
});

 

The observable call returns an object that not only can store a property, but let the KnockoutJS binding stack know when the property changes (two way binding). In order to use the gameModel ‘class’, I created a view model to store a collection of gameModels like so:

 

// Define Main ViewModel
var theViewModel = {
  games: ko.observableArray([]),
  ...
};

The games property of the view models ‘class’ will hold the current list of games that are shown in the UI. The observableArray object is like the observable object but it notifies the data binding stack when a collection changes. The goal here is to have the view model load the games from the REST service and as the collection changes, the HTML should change to react to that. No more manually creating/destroying parts of the markup.

In order to make this work, we must use the data binding syntax in the HTML code:

<div data-bind="foreach: games">
  <div class="game-block">
    <div>
      <img data-bind="attr: { src: imageUrl, alt: name }" /></div>
    <div class="game-name" data-bind="text: name">
    </div>
  </div>
</div>

For more: http://wildermuth.com/2011/11/20/Using_MVVM_on_the_Web_with_KnockoutJS

jQuery and Windows Azure

The goal of this blog entry is to describe how you can host a simple Ajax application created with jQuery in the Windows Azure cloud. In this blog entry, Stephen Walther assume that you have never used Windows Azure and going to walk through the steps required to host the application in the cloud in agonizing detail.

Our application will consist of a single HTML page and a single service. The HTML page will contain jQuery code that invokes the service to retrieve and display set of records.

There are five steps that you must complete to host the jQuery application:

1. Sign up for Windows Azure
2. Create a Hosted Service
3. Install the Windows Azure Tools for Visual Studio
4. Create a Windows Azure Cloud Service
5. Deploy the Cloud Service

Via jQuery and Windows Azure

jLight – Interop between Silverlight and JS based on jQuery

 

Interop between Silverlight and the javascript based on jQuery. The syntax used in Silverlight is as close as posible to the jQuery syntax.

Examles of regular jQuery expressions:
jQuery:

    jQuery("span:last").offset({left : 10, top : 100}); 
    jQuery("div").css("border","3px solid red");

   jLight in Silvelight:

    jQuery.Select("span:last").Offset(new {left = 10, top = 100 }); 
    jQuery.Select("div").Css("border","3px solid red");

   But, with jLight you can interop between C# and javascipt. The code below runs thru each textbox and adds its value to a textbox.

    jQuery.Select("input:text").Each((a, b) =>
                    {
                        textBox1.Text += jQueryObject.FromObject(a).Val();
                        return false;
                    });

Via jLight

5 Steps Toward jQuery Mastery

 

Most of us get our first taste of jQuery by implementing a simple animation effect or using a plugin for a specific purpose. This is natural because, like JavaScript itself, jQuery lends itself to beginning with the basics and building from there.

As you branch out from the trivial and begin using jQuery for more complex solutions, it’s important that you stay vigilant for new ways to approach those more involved problems. What works well enough for a dozen lines of code may not work for hundreds, and the unforgiving cross-platform environment that comes along with developing for web browsers only magnifies any trouble you run into.

With that in mind, I want to share a few tips with you that I found valuable as my work with jQuery became more complex.

• Use Firebug to experiment interactively …

• Cache selector results …

• Don’t use jQuery unless there’s a good reason to …

• Learn advanced selectors, filters, and traversals …

• Use CDN hosting when available …

Goto 5 Steps Toward jQuery Mastery | Encosia for details

A better solution to find ASP.NET ClientIDs with jQuery

 

A small routine that returns us a jQuery object based on only the id:

function $$(id, context) {
    var el = $("#" + id, context);
    if (el.length < 1)
        el = $("[id$=_" + id + "]", context);
    return el;
}

So in simple usage to select my ctl00_MainContent_txtSymbol value both of the following work:

alert( $$("txtSymbol").attr("id") );

Or if I want to be specific about the container:

alert( $$("txtSymbol",$("#wrapper")).attr("id") );

Via A generic way to find ASP.NET ClientIDs with jQuery – Rick Strahl’s Web Log

Paging and Sorting ListView Control with jQuery Tablesorter plugins within ASP.NET MVC

 

This article provides a simple example of using jQuery along with the jQuery tablesorter and tablesorter.pager plug-ins to provide sorting and paging support for a listview within the context of an ASP.NET MVC application.

http://tablesorter.com/docs/

 

Paging and Sorting ListViews with ASP.NET MVC and jQuery

Form Validation using jQuery Validation plugin

In the example above, we only used three validation methods (required, email and url). There are several other methods that can be used here. Here are a few of them:

• remote: requests a resource to check the element for validity.
• min: makes the element require a given minimum.
• date: makes the element require a date.
• creditcard: makes the element require a credit card number.
• equalTo: requires the element to be the same as another one.

You can find an exhaustive list of built-in validation methods at http://docs.jquery.com/Plugins/Validation#List_of_built-in_Validation_methods.

But I can’t find a suitable built-in method for my situation. Can I write my own method?” Yes you can! And its really easy.

Writing Your Own Validation Method

Calling the jQuery.validator.addMethod() method. It takes three parameters:

• name: The name of the method, used to identify and referencing it, must be a valid javascript identifier.
• method: the actual method implementation, returning true if an element is valid.
• message: The default message to display for this method.

In the validate function, we specify that the ‘sport’ field should be validated using the selectNone method.

Make sure to look at the source code behind these demos

Via Form Validation using jQuery

Another tutorial here

jQuery 1.3 Cheat Sheet

View this document on Scribd

Using FireFinder & FireQuery Add-on for jQuery

•  Firefinder for Firebug for Firefox for Fiddling with jQuery
• Digging Into The FireQuery Add-on for jQuery