Button in template

[Brad]

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>

 

 

 ​

[Petyo]

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

 

 

[Brad]

It is not a listview. I wasn't sure if data-bind works on other types of templates. It is just a table I am building.I'm somewhat of a newbie, but the documentation is a little hard to understand if you are building your own stuff outside of using the widgets.

[Petyo]

Hello Brad,

 

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

 

Regards,
Petyo
Telerik

 

 

[Brad]

It seems nearly impossible to recreate this in dojo. I have this:

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.

[Petyo]

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,

Petyo

Telerik

 

 

[Brad]

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.

[Petyo]

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

 

 

[Brad]

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.

[Petyo]

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

 

 

[Brad]

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.

[Petyo]

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

 

 

[Brad]

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

 

[Petyo]

Hello Brad,

 

you need a single root element in the template - like this.

 

Regards,
Petyo
Telerik

 

 

[Brad]

Thank you, that helps a lot.