This is a migrated thread and some comments may be shown as answers.

KendoUI MVVM with Revealing Module Pattern

0 Answers 74 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 03 Aug 2012, 06:00 AM
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 kendo.data.DataSource({
        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"
       }
        }
    });
    contacts_Details_DataSource.read();
    var goToContactsListing = function () {        
        this.selectedContactID = null;
        location.hash = ''
    }

    var change = function () {
        hasChanges = true;        
    }

    var hasChanges = false;

    var saveChanges = function () {
        contacts_Details_DataSource.sync();
        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" >
    <ul>
            <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>
        </ul>
        <button data-bind="click: goToContactsListing">Back to Listing</button>
         <button data-bind="click: saveChanges, enabled: hasChanges">Save Changes</button>
</div>
/***********************************/  

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




No answers yet. Maybe you can help?

Tags
MVVM
Asked by
Matt
Top achievements
Rank 1
Share this question
or