Issue binding JSONP data with Knockout.js

[Meapserie]

I am working on a web project that involves a cross-domain call, and I decided to use Knockout.js and ASP.NET Web Api. I used the Single Page Application template in VS 2012, and implemented the Knockout class as it is. The page works great when I make JSON call from the same domain, but when I try using JSONP from the remote server the knockout does not seem to bind the data. I can see the JSON data received from the remote while making JSONP call, but knockout cannot bind the data. Here is my JavaScript ViewModel classes:\[code\]window.storyApp.storyListViewModel = (function (ko, datacontext) {//Datavar self = this;self.storyLists = ko.observableArray();self.selectedStory = ko.observable(); self.error = ko.observable();//Operations//Load initial state from the server, convert it to Story instances, then populate selfdatacontext.getStoryLists(storyLists, error); // load update stories self.selectStory = function (s) { selectedStory(s); $("#showStoryItem").click(); window.scrollTo(0, 0); storyItem = s; }//append id to the hash for navigating to anchor tagself.backToStory = function () { window.location.hash = storyItem.id; } self.loadStories = function () { datacontext.getStoryLists(storyLists, error); // load update stories }return { storyLists: self.storyLists, error: self.error, selectStory: self.selectStory };})(ko, storyApp.datacontext);// Initiate the Knockout bindings\[/code\]ko.applyBindings(window.storyApp.storyListViewModel);}And my DataContext class as below:\[code\]window.storyApp = window.storyApp || {};window.storyApp.datacontext = (function (ko) {var datacontext = { getStoryLists: getStoryLists};return datacontext;function getStoryLists(storyListsObservable, errorObservable) { return ajaxRequest("get", storyListUrl()) .done(getSucceeded) .fail(getFailed); function getSucceeded(data) { var mappedStoryLists = $.map(data, function (list) { return new createStoryList(list); }); storyListsObservable(mappedStoryLists); } function getFailed() { errorObservable("Error retrieving stories lists."); } function createStoryList(data) { return new datacontext.StoryList(data); // TodoList is injected by model.js }}// Privatefunction clearErrorMessage(entity) { entity.ErrorMessage(null);}function ajaxRequest(type, url, data) { // Ajax helper var options = { dataType: "JSONP", contentType: "application/json", cache: false, type: type, data: ko.toJSON(data) }; return $.ajax(url, options);}// routesfunction storyListUrl(id) { return "http://secure.regis.edu/insite_webapi/api/story/" + (id || "");}\[/code\]})(ko);This page: http://insite.regis.edu/insite/index.html makes the cross-domain call to secure.regis.edu, and it is not working. However the same page on secure.regis.eduinsite/index.html making JSON call works just fine.What am I doing wrong? Any help will be greatly appreciated.