HTML5 App with MVVM and Knockout Study(4)

Study (4) Custom Binding Handlers and Persisting Data

• Custom Binding Handlers

 

• Demo: Binding to jQuery button to change multiple attributes

Here the binding handler turns the button to jQuery UI button and modifies the attributes of it by condition

Rresult:

 

• Binding Handler with Behavior - starRating Demo

 

• Ajax, Service Abstraction, and jQuery Dialogs

1.ajaxservice.js

(function (my) {
    "use strict";
    //TODO:  put your hosting server here
    var serviceBase = 'http://localhost:50718/Product/',
        getSvcUrl = function (method) { return serviceBase + method; };

    my.ajaxService = (function () {
        var ajaxGetJson = function (method, jsonIn, callback) {
            $.ajax({
                url: getSvcUrl(method),
                type: "GET",
                data: ko.toJSON(jsonIn),
                dataType: "json",
                contentType: "application/json",
                success: function (json) {
                    callback(json);
                }
            });
        },
            ajaxPostJson = function (method, jsonIn, callback) {
                $.ajax({
                    url: getSvcUrl(method),
                    type: "POST",
                    data: ko.toJSON(jsonIn),
                    dataType: "json",
                    contentType: "application/json",
                    success: function (json) {
                        callback(json);
                    }
                });
            };
        return {
            ajaxGetJson: ajaxGetJson,
            ajaxPostJson: ajaxPostJson
        };
    })();
} (my));

2.dataservice.shopping.js

(function (my) {
    "use strict";
    my.shoppingDataService = {
        getSaleItems : function (callback) {
            //my.ajaxService.ajaxGetJsonp("GetSaleItems", null, callback);
            my.ajaxService.ajaxGetJson("GetSaleItems", null, callback);
        },

        placeOrder: function (shoppingCart, callback) {
            //my.ajaxService.ajaxPostJsonp("PlaceOrder", shoppingCart, callback);
            my.ajaxService.ajaxPostJson("PlaceOrder", shoppingCart, callback);
        }
    };
}(my));

 

• Change Tracker to check dirty.

Download and install Knockout.ChangeTracker from http://nuget.org/packages/Knockout.ChangeTracker

 

• Knockout Mapper

Use the Mapper to wrap up JSON data to objects that have observable or observable array