Dynamically selecting data templates

[Brian Vallelunga]

I'm attempting to use the MVVM framework to bind an array of objects to some templates. In my scenario, assume I have an array of animals. I want to use a different template for each animal. How can this be accomplished?

The code might look like this:

var vm = kendo.viewModel({

   animals: []

});

  

vm.animals.push(new Cat());

vm.animals.push(new Dog());

  

kendo.bind("#farm", vm);

With HTML that looks like:

<div id="farm">

<div data-template="animal-template" data-bind="source: animals"></div>

</div>

  

Here is where I would define the different templates for each animal

[Petyo]

Hi,

Different templates for different types of objects are not supported at the moment, but you can do something like that:

<script type="text/x-kendo-template">
# if (data instanceof Cat) { #
   This is a cat template!
# } else if (data instanceof Dog) { #
   Woof-Woof!
# } #
</script>

Greetings,
Petyo
the Telerik team

[Brian Vallelunga]

Thank you Petyo, that will work, although that can get pretty messy rather quickly. Taking that idea and expanding on it, I made that template do nothing besides render other templates. Here's what I ended up with:

<script id="animal-template" type="text/x-kendo-template">

# if (data instanceof Cat) { #

   <div data-template="cat-template" data-bind="source: this"></div>

# } else if (data instanceof Dog) { #

   <div data-template="dog-template" data-bind="source: this"></div>

# } #

</script>

The benefit here is that the individual templates can live elsewhere.