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

Using the Microsoft Ajax Minifier to reduce the size of any JavaScript file

 

The Microsoft Ajax Minifier enables you to reduce the size of a JavaScript file by removing unnecessary content from the JavaScript file. The tool supports two modes: normal crunching and hypercrunching.

When you use normal crunching, the Microsoft Ajax Minifier strips all comments, unnecessary whitespace, curly-braces, and semicolons from a JavaScript file. Surprisingly, just removing all of this unnecessary code fluff can make a significant difference to the size of a JavaScript file.

When you use hypercrunching, the Microsoft Ajax Minifer gets more aggressive about reducing the size of a JavaScript file. In hpercrunching mode, the Microsoft Ajax Minifier shortens the names of local variables (variables in functions but not global variables) and it removes unreachable code.

The article also shows how to use the Microsoft Ajax Minifier from the Command-Line and how to integrate the Microsoft Ajax Minifier directly into the Visual Studio build process.

Using the New Microsoft Ajax Minifier

DHTML JavaScript Tooltips, Balloon Library

 

JavaScript, DHTML Tooltips/Bubble/Popup Balloon
JavaScript Cross Browser Library.
Developed by Walter Zorn

Via DHTML JavaScript Tooltips

Simple Javascript to displaying the client’s current date and time

 

Simple set of functions to display the client’s date and time on your web pages.

CodeProject: Displaying the client’s current date and time. Free source code and programming help

How to use the YouTube embedded Video Player

 

YouTube Chromeless Player API

 

Chromeless player SWF URL:

http://gdata.youtube.com/apiplayer?key=DEV_KEY

note: it is using gdata.youtube.com and videoId is no longer part of the url as it was used in the javascript player api.

 

Functions

The following functions are available in addition to the ones listed in the JavaScript API section below:

loadVideoById(videoId:String, startSeconds:Number):Void

cueVideoById(videoId:String, startSeconds:Number):Void

setSize(width:Number, height:Number):Void

Sample Code: http://code.google.com/apis/youtube/chromeless_player_reference.html#Examples

YouTube JavaScript Player API

 

Embedding the YouTube player using SWFObject

We recommend using SWFObject to embed any players that will be accessed using the JavaScript API. This will allow you to detect the end user’s Flash Player version (the JavaScript API requires Flash Player 8 or higher), and also will get rid of the ‘Click to activate this control’ box when using Internet Explorer to view the player. To enabled the API in the SWF, you must pass in the parameter enablejsapi=1.

   Additional SWF Url Parameters that allows you to set things like color, border, autoplay, ‘Genie’ menu, related videos etc…

Getting the Player Reference

e.g. function onYouTubePlayerReady(playerId) { ytplayer = document.getElementById(“myytplayer”); }

Issuing Calls

e.g. function play() { if (ytplayer) { ytplayer.playVideo(); } } <a href=”javascript:void(0);” onclick=”play();”>Play</a>

Subscribing to Events

e.g.

function onYouTubePlayerReady(playerId) { ytplayer = document.getElementById(“myytplayer”); ytplayer.addEventListener(“onStateChange”, “onytplayerStateChange”); }

function onytplayerStateChange(newState) { alert(“Player’s new state: ” + newState); }

Functions and Events exposed by the Javascript Player API: http://code.google.com/apis/youtube/js_api_reference.html#Operations

Sample Code: http://code.google.com/apis/youtube/js_api_reference.html#Examples

How to embed Flash Player content using SWFObject dynamic publishing

 

STEP 1: Create alternative content using standards compliant markup

STEP 2: Include the SWFObject JavaScript library in the head of your HTML page

STEP 3: Embed your SWF with JavaScript

STEP 4: Use JavaScript Objects to define your flashvars, params and object’s attributes

TIPS

• Use the SWFObject HTML and JavaScript generator to help you author your code [ http://code.google.com/p/swfobject/wiki/generator ]
• Just repeat steps 1 and 3 to embed multiple SWF files into one HTML page

Why use Dynamic publishing

Description

Create alternative content using standards compliant markup and embed Flash content with unobtrusive JavaScript.

Pros

Avoids ‘click-to-activate’ mechanisms in Internet Explorer 6+ and Opera 9+ and is easy to author (even without using this generator).

Cons

The embedding of Flash content relies on JavaScript, so if you have the Flash plug-in installed, but have JavaScript disabled or use a browser that doesn’t support JavaScript, you will not be able to see your Flash content, however you will see alternative content instead. Flash content will also not be shown on a device like Sony PSP, which has very poor JavaScript support, and automated tools like RSS readers are not able to pick up Flash content.

Silverlight & HTML DOM interaction Screencast

By Tim Heuer

 

Using Javascript to manipulate HTML & Silverlight elements.

Download Screencast

VS 2008 JavaScript Intellisense for Silverlight From ScottGu

 

• VS2008 JavaScript Intellisense for Silverlight

• Silverlight 1.0 JavaScript Intellisense CodePlex Project from Justin-Josef Angel
  • Tutorial

To use it, simply add his JavaScript library to the top of your page:

You can then use Justin’s helper functions to take late-bound objects and indicate their JavaScript type:

This will then cause the VS 2008 JavaScript intellisense engine to automatically provide intellisense and syntax checking for you:

 

del.icio.us Tags: VS2008, Silverlight, Javascript