This is a migrated thread and some comments may be shown as answers.

Templates in an external file using MVVM

1 Answer 175 Views
Templates
This is a migrated thread and some comments may be shown as answers.
Nathan
Top achievements
Rank 1
Nathan asked on 03 Jul 2012, 04:40 PM
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? 

1 Answer, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 04 Jul 2012, 06:08 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Templates
Asked by
Nathan
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Share this question
or