Templates in an external file using MVVM

[Nathan]

I am trying to create reusable pieces of code that can be declaratively bound using the Kendo MVVM framework.  Here is an example of what I mean:

template.tmpl

<div>

  <p>This is rendering of the ${viewModel} view model</p>

  <span data-bind="text: ${viewModel}.data">

</div>

test.html

<script id="viewTemplate" type="text/x-kendo-tmpl" src="template.tmpl">

<script type="text/javascript" src="test.js" />

<div data-template="viewTemplate" data-bind="source: viewData.viewModel1">

<div data-template="viewTemplate" data-bind="source: viewData.viewModel2">

test.js

var viewModel = kendo.observable({

  viewData: {

    viewModel1: {

      viewModel: "viewModel1"

    },

    viewModel2: {

      viewModel: "viewModel2"

    }

  },

  viewModel1: {

    data: "I am the data for view model 1".

  },

  viewModel2: {

    data: "I am the data for view model 2".

  }

})

This example works fine when the template is within test.html.  However, when I try to separate out the template into it's own template.tmpl file, it does not work.  What am I doing wrong? 

[Atanas Korchev]

Hello Nathan,

 Most browsers will not download a <script> element whose type is not one of the predefined (e.g. text/javascript). This is why your remote templates do not work.

 I would recommend a different approach - loading the template using jQuery and then appending it to the DOM. This technique is demonstrated in this blog post: http://encosia.com/using-external-templates-with-jquery-templates/ (it is using jQuery templates but the same approach will work with Kendo templates as well).

Regards,
Atanas Korchev
the Telerik team