Question

I have a big problem with using Knockout JS. In my view model I have a field, called Method, that is actually an other view model.

This view model can be one of three different things (it is mapped to a polymorphic object in the domain model). To solve this I use templates that checks which type of Method that is selected withing the domain model and then shows the template that binds data for that type.

The function that checks the type of method looks like:

this.getTemplate = function (data) {
        var method = data.original.get_Method();
        if (method instanceof MyProj.MethodA)
            return "methodA";
        else if (method instanceof MyProj.MethodB)
            return "methodB";
        else if (method instanceof MyProj.MethodC)
            return "methodC";
    }

The markup where I bind the template looks like:

<div data-bind="template: {name: getTemplate($data), data: $data.Method}"></div>

This actually works very nice and when I change the type of method via an dropdown in the UI the domain model updates and the right template is shown. However here comes my problem. Each template contains a number of different fields that are specific for each method type. Whenever I change one of the values in the view model displayed by one of the templates the UI flashes and I think that happens because the template get selected again. This is quite irritating and looks extremly bad.

Any ideas on how to solve this problem? Any help would be greatly appreciated!

Thanks in advance

/Björn

Answer 1

Did you use any observable inside the getTemplate function. Updating the value of that observable makes the template rerender and you get your flash effect.

Checkout this link Part : “Note 5: Dynamically choosing which template is used“.