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

jquery templates doesn't work

3 Answers 93 Views
Integration with other JS libraries
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 29 May 2013, 07:51 AM
Hello ,
i tried the example  with the tichets,where it uses jquery templates,also knockoutjs
and when i render it doesn't recognize the template sintax.is a problem with jquery template release?or my mistake?

Regards,
Daniel


here is my view code(the controller is only returning the view)

 <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/examples.js"></script>
<script src="../../Scripts/jquery.tmpl.js" type="text/javascript"></script>
<div id="example" class="k-content">
<div id="options" class="k-widget k-header">
<label for="ticket">Ticket class:</label>
<select id="ticket" style="vertical-align: middle" data-bind="options: tickets,
optionsCaption: 'Choose...',
optionsText: 'name',
value: chosenTicket"></select>

<label for="departure">Departure:</label>
<input id="departure" data-bind="value: departure" />

<label for="seat">Seat:</label>
<input id="seat" data-bind="value: quantity" />
</div>
<div id="boardingpass" data-bind="template: 'ticketTemplate'"></div>
<script id="ticketTemplate" type="text/x-jquery-tmpl">
{{if chosenTicket}}
<span class="class-ticket"><b>${ chosenTicket().name }</b> ($${ chosenTicket().price }) </span>
<span class="class-card"><b>${ chosenTicket().name }</b></span>
<span class="date">${ kendo.toString(kendo.parseDate(departure()), "MM/dd/yyyy") } </span>
<span class="seat-ticket">${ quantity() } </span>
<span class="seat-card">${ quantity() } </span>
<button class="clear-button" data-bind="click: resetTicket">Clear</button>
{{else}}

{{/if}}
</script>
<script>
$(document).ready(function () {
var viewModel = {
tickets: [
{ name: "Economy", price: 199.95 },
{ name: "Business", price: 449.22 },
{ name: "First Class", price: 1199.99 }
],
chosenTicket: ko.observable(),
resetTicket: function () { this.chosenTicket(null) },
departure: ko.observable(new Date()),
quantity: ko.observable(1)
};

ko.applyBindings(viewModel);

$("#ticket").kendoDropDownList().trigger("change");
$("#ticket").bind("change", function () {
$(this).data("kendoDropDownList").select(this.selectedIndex);
});

$("#seat").kendoNumericTextBox({
min: 1,
max: 60,
format: "n0",
decimals: 0
});

var departure = $("#departure").kendoDatePicker().data("kendoDatePicker");

departure.value(kendo.parseDate(departure.element.val()));
});
</script>
<style scoped>
#options {
width: 660px;
margin: 20px auto;
padding: 10px;
background-image: none;
border: 1px solid inherit;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.25), inset 0 0 30px rgba(0,0,0,0.07);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.25), inset 0 0 30px rgba(0,0,0,0.07);
box-shadow: 0 1px 1px rgba(0,0,0,0.25), inset 0 0 30px rgba(0,0,0,0.07);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
#options label {
padding-left: 5px;
}
#boardingpass {
width: 575px;
min-height: 270px;
margin: 20px auto;
position: relative;
background: url('http://demos.kendoui.com/content/web/integration/boardingPass.png') transparent no-repeat 0 0;
}

.class-ticket {
position: absolute;
margin: 26px 0 0 45px;
}

.class-card {
position: absolute;
margin: 58px 0 0 430px;
}

.date {
position: absolute;
margin: 58px 0 0 45px;
}

.seat-ticket {
position: absolute;
margin: 58px 0 0 270px;
}

.seat-card {
position: absolute;
margin: 58px 0 0 530px;
}

.clear-button {
position: absolute;
margin: 240px 0 0 0;
}
</style>
</div>

3 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 31 May 2013, 07:36 AM
Hello,

 It seems the latest KnockoutJS requires at least 1.0.0.pre of jquery templates in order to work. You can get it from here: https://github.com/BorisMoore/jquery-tmpl/blob/master/jquery.tmpl.js

 Our example is using an older version of KnockoutJS and this is why it works.

Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Daniel
Top achievements
Rank 1
answered on 31 May 2013, 01:14 PM

could you tell me what version of knockout have you used? because the result is the same,it doesn't render the template.
and if i try the latest version that i found it at boris gitub,it gives me some error in the script.

And what is happening now,jquery template is not used anymore by nobody?knockout what templates are using now in order to work?
should i use only kendo observable from now on ?
Regards.
Daniel
0
Atanas Korchev
Telerik team
answered on 31 May 2013, 01:28 PM
Hi Daniel,

 Our demo is built using Knockout 1.2.1. You can find more information about KnockoutJS templates in the related documentation: http://knockoutjs.com/documentation/template-binding.html

Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Integration with other JS libraries
Asked by
Daniel
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Daniel
Top achievements
Rank 1
Share this question
or