When I have this code in my template code:
<a data-role="button" class="btn btn-default" data-click="launchPlayer" data-id="#= data.class_id #">Launch Class</a>
the button doesn't get wired up and clicking doesn't call my function.
When I move it out of the template it works and calls the function.
How do I get it to fire the event in my template?
Below is my template code.
<script type='text/x-kendo-template' id="classtemplate">
<h1>#= data.class_id #: #= data.overview.class_name #</h1>
<table class="table">
<tbody>
<tr>
<td>Number of Lessons</td>
<td>#= data.overview.lesson_total #</td>
</tr>
<tr>
<td>Saved Lesson</td>
<td>#= data.overview.saved_lesson #</td>
</tr>
<tr>
<td>Difficulty</td>
<td>#= data.overview.difficulty #</td>
</tr>
<tr>
<td>Prerequisites</td>
<td>#= data.overview.prerequisites #</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-sm-12">
<h4>Description</h4>
<div>#= data.overview.description #</div>
</div>
</div>
<a data-role="button" class="btn btn-default" data-bind="click: launchPlayer" data-id="#= data.class_id #">Launch Class</a>
</script>
14 Answers, 1 is accepted
Hello Brad,
the problem may be due to the template being part of a widget which is not mvvm-bound. For example, (assuming that this is a ListView), you should use data-bind="source: foo" VS data-source="foo".
Regards,
Petyo
Telerik

Hello Brad,
can you show me the entire implementation (preferably, runnable)? You may use our Dojo for that purpose.
Regards,
Petyo
Telerik

http://dojo.telerik.com/@bradrice/OsEQe
Is there any way for you to look at a telerik platform project I have created? You can see it in there.
I’m having trouble understanding how to bind the model to the template. The only way I have been able to get it to work is to do a jquery ajax call and bind the data to the template in the success callback. It works in the simulator, but when I run it on an ipad using Run it doesn’t work.
Hello Brad,
the approach you have taken won't work - the template contents are inserted in the view after the MVVM binding has traversed the DOM contents of the view. I may suggest that you re-design your approach to use mvvm to hide the parts of your app, and show them once data is retrieved. Upon data retrieval, you may set the response data to a view model field - this will rebind the UI automatically.
Regards,
PetyoTelerik

Thank you. I have done a ajax request view that model and set the model view to data-model="APP.models.myClassDetail"
Then I bound the data to the template like this:
<div class="col-sm-12">
<div id="myClass" data-template="classtemplate" data-bind="source: ds">
</div>
<div id="myLauncher" data-template="launchbutton" data-bind="source: ds">
</div>
</div>
That seems to work. I didn't know I could bind source directly to the template this way. I don't see any documentation saying you can. However, for whatever reason, I have to have two templates and bind my button as a secondary template. For some reason when I move the button code inside the first template Kendo doesn't widgetize it.
Hello Brad,
I can't be certain on what goes on in this case. May you please update your Dojo with the current implementation?
Regards,
Petyo
Telerik

Thanks for your help:
I've tried to emulate what I am doing in my project with ajax. However, I can't figure out how to do it using the dojo. Could you tell me what I am doing wrong?
http://dojo.telerik.com/@bradrice/owafE/2
Then I can tell you what I am seeing in the templates.
Hello Brad,
the dojo has some javascript parse errors. apart from that, it also utilizes the deviceready event, which is specific for cordova - you should remove that.
Regards,
Petyo
Telerik

Could you please look at it again: http://dojo.telerik.com/@bradrice/owafE/6
Now I'm getting a 'triggerBeforeShow' error. Not sure what is causing this. I've removed to cordova device ready call.
Hello Brad,
the triggerBeforeShow error occurs because the view is missing its data-role attribute. In addition to that, I notice that you pass an object to the datasource data: property - an array is expected there.
Regards,
Petyo
Telerik

OK, thank you. Now I have the dojo document fixed up so it shows you what I was trying to ask in the first place.
Notice when I put the button in the detail template, kendo doesn't turn it into a kendo button.
But when I pull it out into it's own template it becomes a button. See the launch button stacked one on top of the other.
http://dojo.telerik.com/@bradrice/owafE/6
Hello Brad,
you need a single root element in the template - like this.
Regards,
Petyo
Telerik
