Templates in an external file using MVVM

2 posts, 0 answers
  1. Nathan
    Nathan avatar
    6 posts
    Member since:
    Apr 2012

    Posted 03 Jul 2012 Link to this post

    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:

      <p>This is rendering of the ${viewModel} view model</p>
      <span data-bind="text: ${viewModel}.data">

    <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">

    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? 
  2. Atanas Korchev
    Atanas Korchev avatar
    8462 posts

    Posted 04 Jul 2012 Link to this post

    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).

    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top