CRUD operations on datasource in different remote view

[Lee]

I am building a mobile application and am using the datasource feature to perform CRUD operations.  The buttons that initiate the destroy and update on the transport are in a different view from where the datasource is described.

For example, the listmessages view has a listView widget to display all the messages (from the datasource), when one is selected, they are directed to the viewmessage remote view.

When in this view I want to initiate the update and destroy on the datasource in the previous view (listmessages ).

I currently use PHP to display the data on viewmessage view and would prefer to access the relevant dataSource id to display the selected data.

Hope this makes sense.  Please see my code for a better idea of what I am trying to achieve.

<div data-role="view" data-title="Mobile" id="listmessages" data-init="listMessagesInit">

        <h2>Customer Messages</h2>

        <p><?php echo $unread_messages . ' - unread messages'; ?></p>

        <ul id="message_list"></ul>

    </div>

      

    <script id="message_list_template" type="text/x-kendo-template"><a href=""><div style="float:left; width:150px; height: 50px" class="isnew_#= isnew #">#= customer_name #<br />#= created #</div><div style="height: 50px"id="message_#= id #" class="isnew_#= isnew #">#= message #</div></a></script>

  

<script>

     function listMessagesInit(){

           

          var dataSource = new kendo.data.DataSource({

             

            transport: {

                read: "/messages/data",

                dataType: "json",

                update: {

                    url:  function() {

                        //where id is a global variable

                        var url = "/messages/markasread/" + id + "/" + read;

                        return url;

                    },

                    type: "POST",

                    dataType: "json"

                    //other configurations

                },            

  

                destroy: {

                    url:  function() {

                        //where id is a global variable

                        var delurl = "/messages/delete/" + id;

                        return delurl;

                    },                    

  

                    type: "DELETE",

                    dataType: "json"

                }

                          

            },              

            schema: {

              model: {

                  id: "id",

                  fields: {

                      created: { type: "string" },

                      message: { type: "string" },

                      customer_name: { type: "string" },      

                      isnew: { type: "string" }

                     }

                       

                 }

             } 

                   

           });

                    

  

          $("#message_list").kendoMobileListView({

              dataSource: dataSource,

              //pullToRefresh: true,

                          //appendOnRefresh: true,

              style: "inset",

              click: function(e) {

                var id = e.dataItem.id;

                var selected = dataSource.get(id);

                window.kendoMobileApplication.navigate("/messages/view/" + id);

              },        

              template: $("#message_list_template").text()

          });

  

     }

    </script>

      

    <style>

    #listmessages div.isnew_1 {font-weight:bold}

    #listmessages div.isnew_0 {font-weight:normal}

      

   </style>

    <div data-role="view" data-title="Mobile" id="viewmessage" data-init="viewMessageInit">

    <h2>Message</h2>

        <p>Date: <?=$message->message->created?></p>

        <p>From: <?=$message->message->customer_name?></p>

        <p>Email: <a href="mailto:<?=$message->message->email?>" target="_blank"><?=$message->message->email?></a></p>

        <p>Telephone: <?=$message->message->customer_telephone?></p>

        <p>Location IP:<?=$message->message->ip?></p>

        <div data-role="scroller">

            <p><?=$message->message->message?></p>

        </div>

        <?php $read_text = ($message->message->isnew == 1 ? 'Mark as read' : 'Mark as unread'); ?>

        <?php $read = ($message->message->isnew == 1 ? 0 : 1); ?>

        <p><a data-align="left" data-role="button" id="markasread" ><?=$read_text?></a>

        <a data-align="right" data-role="button" id="delete">Delete</a></p>

         

    </div>

    <script>

  

      

    function viewMessageInit(){

          //var selected is defined in previous view - how to access this?

          $("#markasread").click(function(){    

            selected.set("isnew", read);  

            dataSource.sync();        

          }); 

            

          $("#delete").click(function(){

            dataSource.remove(selected);

            dataSource.sync();        

          }); 

                    

  

    }

      

</script>

Many thanks in advance for any advice.

[Lee]

Update:

I now have the CRUD operations working but am still struggling to find how to get the datasource info for a selected id.  When the user selects  an item from the list they are taken to another pages to be show n the full details for that item.   This is currently being pulled out via PHP when I should be able to access this from the datasource.  I'm struggling to find the syntax on how to do this. Any suggestions much appreciated.