KendoUI MVVM with Revealing Module Pattern

1 posts, 0 answers
  1. Matt
    Matt avatar
    16 posts
    Member since:
    Dec 2011

    Posted 03 Aug 2012 Link to this post

    Hi Guys, Im trying to refactor my javascript to fit the Revealing Module Pattern, but am coming up with a few issues. To start with following is my viewModel function:

    function Contacts_Details_ViewModel(SelectedContactID) {  
        var self = this;
        var selectedContact;
        var selectedContactID = SelectedContactID;
        var contacts_Details_DataSource = new{
            transport: {
                read: {
                    url: $('#urlLink').data('url') + '?tenantID=1&dataType=Contacts_Details',
                    dataType: "json",
                    data: {
                        actionName: function () {                        
                            return selectedContactID;
                update: {
                    url: $('#urlLink').data('url') + '/SaveChanges?tenantID=1&actionName=Contacts_Details',
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8"
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return JSON.stringify(options.models);
                    return options;
            batch: true, 
            change: function () {
                selectedContact = this.view()[0];                        
            schema: {
                model: {
                    id: "ContactID"
        var goToContactsListing = function () {        
            this.selectedContactID = null;
            location.hash = ''

        var change = function () {
            hasChanges = true;        

        var hasChanges = false;

        var saveChanges = function () {
            hasChanges = false;        

        return {
            contacts_Details_DataSource: contacts_Details_DataSource,
            selectedContact: selectedContact,
            goToContactsListing: goToContactsListing,
            change: change,
            hasChanges: hasChanges,
            saveChanges: saveChanges

    Than I have the following to initialize the Contacts View Model:

    $(document).ready(function () {
        var contacts_Details_ViewModel = kendo.observable(new Contacts_Details_ViewModel(1));
        kendo.bind($("#ContactsDetails"), contacts_Details_ViewModel);

    Than I have the following html on the page that binds to the view model
    <div id="ContactsDetails" >
                <li><label>ID</label> <span data-bind="text:selectedContact.ContactID, events: { change: change }"></span></li>
                <li><label>Name</label> <input type="text" class="k-textbox" data-bind="value: selectedContact.FirstName, events: { change: change }" /></li>
                <li><label>UnitPrice</label> <input type="text" class="k-textbox" data-bind="value: selectedContact.LastName, events: { change: change }" /></li>
            <button data-bind="click: goToContactsListing">Back to Listing</button>
             <button data-bind="click: saveChanges, enabled: hasChanges">Save Changes</button>

    My problem is nothing ever shows up in the SelectedContact fields (ID label and firstname lastname textboxes), they are always blank. Everything else seems to be bound correctly (events and simple strings work fine) but just not the selectedContact.

    Any ideas on where Im going wrong? Im thinking whether it is how I set the selectedContact var in the change event of the datasource, im not confident that its being set there correctly.

    Please help I've waisted a day trying to get this to work, so ive got to tap out for my own sanity.

    Thanks in advance

Back to Top