I'm simply trying to loop over an array within my Kendo.View and attempting to render a property from the element. This would be super simple in MVC Razor, e.g.
@foreach( var displayLink in Model ) {
<h1>displayLink.Text</h1>
}
Rather than choosing excerpts I just shared the entire files.
This all runs, no exceptions, etc. The view renders the static content but doesn't render the contents of the loop. I turned on evalTemplate = true
, but still no dice. I haven't been able to find any way to do this and it's driving me nuts. All I can find is ways to wire up a Kendo UI ListView or such. I don't want that weight, I just want to loop over the array directly.
Index.htm (view):
<div class="jumbotron">
<div class="container">
<h1>Web</h1>
<p>The future is <i>now</i>.
</p>
</div>
</div>
# for(var i = 0; i < DashboardLinks.length; i++) { #
<h1>#= DashboardLinks[i].TitleText #</h1>
# } #
Controller:
define(
// == INTERFACE NAME ==
"Controllers.IHome",
// == DEPENDENCIES ==
[
"Util.IGetViewSource",
"Util.ILayout",
"ViewModels.Home.IHomeVM"
],
function ( /* Dependency injections: */ getViewSource, layout, iHomeVM)
{
// Define the module.
var module =
{
index: function () {
getViewSource("~/App/Views/Home/Index.htm", function (viewSource) {
// get the model
var viewModel = new iHomeVM();
viewModel.AddDashboardLink("#timecard", "Time Cards", "Manage time cards and get it done.", "time");
// render the view
var view = new kendo.View(viewSource, { model: viewModel, evalTemplate: true });
// render the view
layout.renderBodyView(view);
});
}
};
// Return the module.
return module;
}
);
HomeVM:
define(
// == INTERFACE NAME ==
"ViewModels.Home.IHomeVM",
// == DEPENDENCIES ==
[
"ViewModels.Shared.ILinkVM"
],
function(
// == DEPENDENCY INJECTIONS ==
iLinkVM
) {
// == CONSTRUCTOR ==
function HomeVM() {
console.log("HomeVM constructor executing.");
// == PROPERTIES & METHODS ==
this.DashboardLinks = [];
// Return a copy of this wrapped in Kendo's observable.
return kendo.observable(this);
}
HomeVM.prototype.AddDashboardLink = function(
href,
titleText,
descriptionText,
iconName) {
this.DashboardLinks.push(new iLinkVM(
href,
titleText,
descriptionText,
iconName
));
}
// Return the view model module.
return HomeVM;
}
);
LinkVM:
define(
// == INTERFACE NAME ==
"ViewModels.Shared.ILinkVM",
// == DEPENDENCIES ==
[
],
function (
// == DEPENDENCY INJECTIONS ==
)
{
// == CONSTRUCTOR ==
function LinkVM(href, titleText, descriptionText, iconName) {
console.log("LinkVM constructor executing.");
// == PROPERTIES & METHODS ==
this.Href = href;
this.TitleText = titleText;
this.DescriptionText = descriptionText;
this.IconName = iconName;
// Return a copy of this wrapped in Kendo's observable.
return kendo.observable(this);
}
// Return the view model module.
return LinkVM;
}
);
I found it: you can do this via setting the "evalTemplate" property: http://docs.telerik.com/kendo-ui/api/javascript/view#configuration-evalTemplate
// create the view
var view = new kendo.View(viewSource, { model: viewModel, evalTemplate: true });
Then you can use MVVM declarative binding and also Kendo template binding, such as a for loop.
Ensure you're properly escaping all of your hashes ('#'), otherwise the templating will blow up.