Using a template with hashtag notation syntax

[fretje]

I'm trying something very similar like this example which I found online and is working:

http://jsfiddle.net/OnaBai/S7K4r/

The only difference is that I use the "hashtag notation" for the template. In the following example, I only changed one minor thing in the template (I added hashtags around the first label: #:text1#):

#:text1#

http://jsfiddle.net/w5P9U/4/

The problem here is that an exception "Uncaught ReferenceError: text1 is not defined" is thrown when initializing the window. This is reasonable, as the window isn't bound to any dataItem at that moment, although I don't understand why a similar exception isn't thrown when using the "data-bind" syntax.

Anyways, I tried a lot of different things to avoid this to no avail.

E.g.: Not setting the template at initialization, but setting it after the dataItem has been bound:

    kendoWindow.content({
        template: $("#record-jsp").html()
    });

also

    kendoWindow.content({
        data: record,
        template: $("#record-jsp").html()
    });

didn't work.

Is it possible to use the hashtag notation in this scenario?

[Alexander Valchev]

Hello fretje,

Using hash notation syntax in this particular case is not possible (and actually I do not understand why you need it). The template is compiled to a JavaScript function. Every variable that is placed between hash tags will be required when the template executes. As you correctly noticed, the template is not rendered for any dataItem, which is why you receive an error.

Binding on the other hand function in a different way - the template will produce HTML mark-up with data-bind attributes. After that Kendo MVVM evaluates the bindings and connects them to the respective ViewModel fields.

I hope this information will help.

Regards,
Alexander Valchev
the Telerik team

[fretje]

Hello Alexander,

Well the problem is that I don't really work with MVVM right now. I have a listview on a page which is already using a datasource. I want to use a window popup with detailed information for a specific item in that list. I want that window to use the same datasource.
As I'm already using hash notation for the template for the listview, I would like to use the same syntax for the template for the window. 

Also, I am showing fields from the datasource in such a way (concatenated, ...) which is difficult to obtain with the data-bind notation, as that requires extra properties/fields to be created on the datasource, but my datasource is a simple json object right now.

After some further research, I actually found a method which let me do what I wanted:

var resultsList = $('#ResultsList').data('kendoListView');
var selectedItem = resultsList.dataSource.view()[resultsList.select().index()];
var template = kendo.template($('#detailsTemplate').html());
$('#DetailsWindow').data('kendoWindow').content(template(selectedItem));

So I had to actually create and compile the template first (var template = kendo.template($('#detailsTemplate').html());) and then I could execute it with the dataitem to actually render the html (template(selectedItem)) which I then pass into the content method of the kendowindow.

This way I can use the same syntax in both my templates.

Regards,

fretje