script src="../js/jquery.min.js"></script>
<script src="../js/kendo.mobile.min.js"></script>
<script src="../js/kendo.binder.min.js"></script>

Now in Google Chrome debugger I see the exception:
Uncaught ReferenceError: ProductID is not defined

As I look in Fiddler I see that the service (JSONP) call was never issued and must
believe this is the issue. Hopefully MVVM binding can be made to work in
the mobile app as I am evaluating Kendo against Sencha Touch which has
 a wonderful built in MVC pattern. I will not let code be written here
 without use of patterns like MVC abd MVVM so this is not a nice feature
 but a requirement in our choice.

I then made a couple of changes to the code that seemed promising:

1. I added a statement to force the read after the viewModel definition

viewModel.productsSource.read();
    Now I see the JSON data in Fiddler with the ProductID but still get the same error. Now I understand that
the datasource should contain observables which should cause the data binding to occur when the JSON data is read. This does not seem to be happening so I added a change method to the datasource that fires wnen the data has been read.It looks like:
change:function() {
       kendo.bind($("#form-container"), viewModel);
},
Now I place a breakpoint on this line and it is hit and the same exception is occuring, hopefully I am missing the obvious! The complete code looks like (HTML is unchanged from example)

<div id="grid" ></div>

Template:

<script type="text/x-kendo-tmplate" id="template">
    <div>
             <ul>
                     <li><a class="list k-link" title="#= title #" id="#= id#" >#= name #</a></li>
                </ul>
    </div>
</script>

I tried to do this using following code but nothing happens. Only id is read correctly but the request is not made.

$(" .list").live({click:function(){
 
    var id=$(this).attr('id');

    $("#grid").kendoGrid({
           dataSource: {
                 transport: {
                        read: "somefile.php?id="+id,  
                 },
               schema: {
                         data:"data",
                          model: {
                               id: "id_pf",
                               fields:{
                                    first:{}, 
                                   second:{}
                               }
                        }
              },
             total: function(response) {
                      return $(response.data).length;
             },

            pageSize: 10
         },

         columns: [
                 { title: "First", field: "first"},
                { title: "Second", field: "second"},
            ]
       });

}});