CODEWITHSUNDEEP
javascriptdurandal
Kaffee Kuchen
Kaffee Kuchen

Reputation: 55

DurandalJS - navigate without viewmodel refresh

I have a list of contact groups which i show on a view. When i click on a contact group, i want to change the current hash and load the associated contacts.

Say, i have 3 contact groups

All (no Id)

Friends (Id := 1)

Family (Id := 2)

Others (Id := 3)

If i click on Friends, the url need to change to #/people/1 and a callback needs to be called with the parameters (Id = 1). If click on All, no Id should be passed (#/people) to load all contacts.

Something like:

router.when("#/people/:id", function (routeData) {
    console.log(routeData.Id); //Output: 1

    // Load contacts by id
});

router.when("#/people", function () {
    // Load all contacts
});

function onContactGroupClick(contactGroup) {
    router.navigateToWithoutReset("#/people/" + contactGroup.Id);
}

The reason is, that i would like to have a central location where it does not matter if the call is made via code or by hand (change Url, or click on a hyperlink).

A good example is Gmail/Contacts

If i use router.navigateTo from DurandalJS, the whole view model will be reloaded. Is there a way to do this with DurandalJS but without refresh the view model?

Upvotes: 1

Views: 638

Answers (1)

Yogesh
Yogesh

Reputation: 2228

What do you mean by central location?

From what I understand is this what you are looking for:

define(["services/dataservice"], function (dataservice) {
        var allContacts = ko.observableArray();
        var friendsContacts = ko.observableArray();
        var contacts = ko.observableArray();
        var loadedAllData= false;
        var loadedFriends = false;
        var vm = {
            activate: activate,
            contacts: contacts,
        };
        return vm;

        function activate(routeData) {
            var id = parseInt(routeData.id);
            if(id === 1)
            {
               if(loadedFriends)
               {
                  //push friends observable into contacts
               }
               else
               {
                  //load friends from server and set loadedFriends to true.
               }
            }
            else
            {
               if(loadedAll)
               {
                   //push all contacts this into the contacts array
               }
               else
               {
                   //load from the webserver, and also filter friends and put them into friends observable. Here set both loadedAll and loadedFriends to true.
               }
            }
        }
    }
);

So if you are binding your view with contacts then when the first time you come to this screen looking for friends from the URL or from a hyperlink it should just load friends data from the web server, on subsequent comebacks to the same screen friends data should be there are it will not be loaded again and again. Durandal will use the same vm and will not reset the flags and observables (unless and until you manually go and hit the browser refresh button).

Upvotes: 1

Related Questions