How to handle datasource with dynamic url using MVVM

[Kenneth]

I have a simple hybrid app with a list bound to a datasource using the MVVM pattern per the beginner examples.

The list is a list of clients, and depending on a parameter to the restfull call (in the data: part of the view model) the list could return recent clients or the result of a keyword search.

What I tried to do was have a global search variable, if blank the call would return recent clients, and if equal to something like "?search=test"would return a list of all clients with the characters 'test' in their name.

Problem is the url: portion seems to evaluated only once as the element is bound because when I change the search variable it is not being passed to the restful API.

I set the search variable then I call this to refresh (which it does but with the search=empty)

        $("#recentClientList").data("kendoMobileListView").dataSource.read();
        $('#recentClientList').data('kendoMobileListView').refresh();

I thought alternately I could create a datasource on the fly set the new datasource on the <ul> list, but I don't know how to bind the new datasource to the <ul> element.

data: new kendo.data.DataSource({

        transport: {
            read: {
                url: app.uri + "clients" + app.search,  
                type: "get",
                dataType: "json",
            }
        },
        schema: {
            data: function (response) {
                var obj = $.parseJSON(response);
                return obj;
            }
        }
    })

 

[Kenneth]

SOLVED:

This seems like a very common situation and the solution is simple but not very obvious:

replacing url: app.uri + "clients" + app.search,  with url: function () {return app.uri + "clients" + app.search}, works.

I'm sure there is some very good technical explanation for this but I can't imagine what it would be.