CODEWITHSUNDEEP
javascriptjquerykendo-ui
PhillipKregg
PhillipKregg

Reputation: 9358

Kendo UI data templates - How to create a master container and load templates into it?

I'm trying to keep this example super (stupid) simple just to make sure I get the concept concrete in my head.

Let's assume that I have two kendo viewmodels like this:

var usersViewModel = kendo.observable({
    name: "Billy Bob",
    address: "123 Maple St",


});

var postsViewModel = kendo.observable({
    title: "Cool stuff",
    content: "Here is some cool content"

});



kendo.bind($("#users-template"), usersViewModel);
kendo.bind($("#posts-template"), postsViewModel);

(note: I may be incorrectly applying these bindings - feel free to let me know if there is a better way.)

And templates that will utilize these viewmodels:

<script id="users-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: name"></td>       
        <td data-bind="text: address"></td> 
    </tr>
</script>

<script id="posts-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: title"></td>       
        <td data-bind="text: content"></td> 
    </tr>
</script>

Ok, now for the tricky part...

I want to have a div container that acts as a "main view". This div will be the first item on the index page of the application and all other templates will be loaded into it. Something like this:

<div id="main-content"></div>

There will be a sub-navigation on the left-hand side that will consist of an unordered list and list item tags. When a list item is clicked - I plan on using JQuery to clear out the content of the "main-content" div and populate it with the template of the corresponding navigational element that was clicked.

I tried using this:

var container = $("#main-content");
container.empty();
container.html("#users-template");

However, this doesn't work. According to the Kendo website, the template is specified with a 'data-template' attribute like this: data-template="users-template". Using this attribute in the javascript also didn't seem to work.

Basically, I'm trying to recreate their example: http://demos.kendoui.com/web/mvvm/source.html But... starting with a blank div that templates are loaded into.

I've created similar interface elements like this before with Backbone.js, and it was pretty painless. I'm just wanting to know the best way to go about it with Kendo.

Any advice would be appreciated.

Upvotes: 1

Views: 8089

Answers (1)

Jesper
Jesper

Reputation: 4555

Seems that Kendo doesn't really support binding to tags that are inside of a script tag. Here's a (somewhat crude) JSFiddle illustrating the behaviour: http://jsfiddle.net/9tcav/28/

When I bind the observable object to the tr-tag when when the tag is still inside the script tag, the content of the tag never changes.

However, if I instantiate the template, insert it into the main-content-div and then bind the data to the resulting rendered template, everything works just fine.

Does your data need to change dynamically? If not, if would probably just use straight up templating, without observable objects, to render the data:

var template = kendo.template($("#template").html());
$("#main-content").html(template({title: "Title", content: "Content"}));

If your data does have to change dynamically - not only when the navigation link is clicked and the view is instantiated - then you have first render the template and then bind the data.

Upvotes: 2

Related Questions