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
test.html
test.js
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?
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?