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

Button in template

14 Answers 321 Views
Button (Mobile)
This is a migrated thread and some comments may be shown as answers.
Brad
Top achievements
Rank 1
Brad asked on 03 Nov 2015, 05:24 PM

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

Sort by
0
Petyo
Telerik team
answered on 05 Nov 2015, 09:24 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Brad
Top achievements
Rank 1
answered on 05 Nov 2015, 01:48 PM
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.
0
Petyo
Telerik team
answered on 09 Nov 2015, 12:31 PM

Hello Brad,

 

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

 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Brad
Top achievements
Rank 1
answered on 09 Nov 2015, 05:25 PM
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.
0
Petyo
Telerik team
answered on 10 Nov 2015, 04:10 PM

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

 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Brad
Top achievements
Rank 1
answered on 10 Nov 2015, 04:15 PM

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.

0
Petyo
Telerik team
answered on 12 Nov 2015, 08:02 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Brad
Top achievements
Rank 1
answered on 12 Nov 2015, 07:01 PM

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.

0
Petyo
Telerik team
answered on 16 Nov 2015, 11:36 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Brad
Top achievements
Rank 1
answered on 16 Nov 2015, 02:47 PM

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.

0
Petyo
Telerik team
answered on 18 Nov 2015, 08:30 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Brad
Top achievements
Rank 1
answered on 18 Nov 2015, 02:19 PM

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

 

0
Petyo
Telerik team
answered on 18 Nov 2015, 04:12 PM

Hello Brad,

 

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

 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Brad
Top achievements
Rank 1
answered on 18 Nov 2015, 06:25 PM
Thank you, that helps a lot.
Tags
Button (Mobile)
Asked by
Brad
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Brad
Top achievements
Rank 1
Share this question
or