JayData and Knockout

JayData integrates well with knockout.  However, the sample codes I see all likes to bind a list of products to an observable array.  That observable array is then render as a html table with a Save button, with each table row containing a single product and an Edit button.  The user has to press the Edit button for that product, change the value (e.g. Title) and then press Save.

Here is one way to programmatically select a product to edit without requiring the user to press an Edit button. 

Assume you have already done the .toArray() to an observable array (e.g. obProducts), you should do the following:

  • loop through the observable array to find the observable product you want to edit.
  • It is important to note that you are not trying to filter the jaydata entity products.
  • assign the found observable product to the observable selectedItem.  Remember to use the subscribe() to attach and detach the observable.innerInstance to the jaydata entity products.

Ping me if you are interested in seeing a sample.

Not allowed by Access-Control-Allow-Origin

Please note that “Access-Control-Allow” error in Chrome console can mask the real error.  It is best to use Fiddler2 to examine the request and response.  In one occasion, it was actually caused by an Entity Framework error due to outdated model.

When one browse a local html file with jquery $.getJSON(url, …), one may get the following error:

XMLHttpRequest cannot load http://xxxx.xxx/xxx/xxxx. Origin null is not allowed by Access-Control-Allow-Origin.

Even if you set up a local web server to serve the same html page with $.getJSON(), you can get a similar error.  The cause is Same Origin Policy.  You can google it.

There are many workarounds, including:

  1. Use JSONP
  2. When running google chrome browser, add “–disable-web-security” as an argument.  Obviously, you want to do it only in a safe development environment.

For MVC Web Api, one can add the following code to a controller method:

System.Web.HttpContext.Current.Response.AppendHeader("Access-Control-Allow-Origin", "*");

Debugging PhoneGap on iOS Tricks

  1. The easiest way is to use Web Inspector.  On the device, you configure Safari and enable Web Inspector.  On the Mac, you enable “Develop” menu with Safari.  You then run your app on your device via XCode.  Then you choose your device under your Mac’s safari’s Develop menu.  See the referenced web inspector for details.
  2. Uncomment PhoneGap event handlers so you can place breakpoints.  See this for details.

Task Scheduler Calling Web APIs

Windows Task Scheduler can call Web APIs via powershell.  It requires Powershell 3.0.

powershell “Invoke-WebRequest http://xxxx.com/webservice/api/v1/Test/Version

C:>powershell "Invoke-WebRequest http://xxxx.com/webservice/api/v1/Test/Version"

StatusCode : 200
StatusDescription : OK
Content : {"Input":"Version()","StatusCode":200,"Message":nu
RawContent : HTTP/1.1 200 OK
Pragma: no-cache
Content-Length: 106
Cache-Control: no-cache
Content-Type: application/json; charset=utf-8
Date: Fri, 01 Mar 2013 23:44:24 GMT
Expires: -1
Server: Microsoft-IIS/...
Forms : {}
Headers : {[Pragma, no-cache], [Content-Length, 106],
[Cache-Control, no-cache], [Content-Type,
application/json; charset=utf-8]...}
Images : {}
InputFields : {}
Links : {}
ParsedHtml : mshtml.HTMLDocumentClass
RawContentLength : 106
One can simply create and run a scheduled task and use fiddler to verify that the web api call takes place.