Question

I’m working on single page application, which involves sorting.
I use

viewModel = new {
    SortAsc = ko.observable(true)
};
ko.linkObservableToUrl(viewModel.SortAsc, "Asc", viewModel.SortAsc());

to achieve that mapping. And it works, but the problem is that mapping returns literal strings “false” and “true” instead of bool value. This causes a problem with checkbox, which is bound to that property:

<input type="checkbox" data-bind="checked: SortAsc" value="Ascending"/>

The question is, how can I make that value from url to be converted to correct type (normal bool), so my checkbox will be updated properly?

Answer 1

Ok, I found how to overcome that problem. Not very elegant, but works.
1. I assumed, that SortAsc will be a string property in my logic. So I left it bound to url like in the question text. Only initialized it with string, istead of bool ("true" intead of true).
2. I created writeable dependend observable, which will do the convertion:

viewModel.SortAscBool = ko.dependentObservable({
    read: function () {
        return this.SortAsc() === "true"; 
    },
    write: function (value) {
        this.SortAsc(String(value));
    },
    owner: viewModel
});

and bound my checkbox to that prop. So now, when checkbox is checked, SortAscBool is changed and it sets literal value to SortAsc (I think this convertion is really not needed, but as a C# programmer I like it that way :)). And of course, when SortAsc changes, SortAscBool will also change and return the converted value to checked binding. And that is what was really needed.

Also, my first though was to simply create one way dependend observable, but then url will not be updated with values from checkbox.